입력폼에서 자동으로 다음 input으로 보내주는 jquery 정보
입력폼에서 자동으로 다음 input으로 보내주는 jquery본문
$(function() {
$(".inputs").keydown(function(e) {
var charLimit = $(this).attr("maxlength");
var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];
if (e.which == 8 && this.value.length == 0) {
$(this).prev('.inputs').focus();
} else if ($.inArray(e.which, keys) >= 0) {
return true;
} else if (this.value.length >= charLimit) {
$(this).next('.inputs').focus();
return false;
} else if (e.shiftKey || e.which <= 47 || e.which >= 106) {
return false;
} else if (e.shiftKey || (e.which >= 58 && e.which <= 95)) {
return false;
}
}).keyup (function () {
var charLimit = $(this).attr("maxlength");
if (this.value.length >= charLimit) {
$(this).next('.inputs').focus();
return false;
}
});
});
제이쿼리구요.. 제이쿼리는 기본적으로 불러와주시고.. 상단에 저 소스 붙여넣으시고..
<input type=text class=inputs maxlength=4/> 이런식으로 class에 inputs 라고 지정해주시면
숫자만 입력 받으면서 maxlength가 채워지면 자동으로 다음 inputs으로 커서가 이동합니다.
삭제하실때에도 백스페이스를 연속으로 눌러주시면 자동으로 이전 inputs으로 커서가 이동하며 삭제됩니다.
핸드폰 번호 입력받을때 쓰려고 소스 찾아서 조금 수정했어요.. 만약 핸드폰번호같은 숫자가 아니라면
$(function() {
$(".inputs").keyup (function () {
var charLimit = $(this).attr("maxlength");
if (this.value.length >= charLimit) {
$(this).next('.inputs').focus();
return false;
}
});
});
이렇게 아랫 부분만 짤라서 쓰셔도 될거같아요..
아.. 그리구 숫자만 입력이 되야하는데 마구잡이로 누르다보면 가끔 한글이 들어갈때가 있어요..
그래서 폼 전송하기 전에 자바스크립트로 숫자만 있는지 한번 더 확인해줬습니다..
if(!num_regx.test(f.callno3.value)){
window.alert('숫자로 입력해주세요');
f.callno3.focus();
return ;
}
이렇게요..
마지막으로 제가 사용한 html 형식은 다음과 같습니다..
<input type="text" name="callno1" class="inputs" id="" maxlength="3" size="3" title="휴대폰첫째자리" style="width:53px; height:25px;" required>
<input type="text" name="callno2" class="inputs" id="" maxlength="4" size="4" title="휴대폰중간자리" style="width:53px; height:25px;" required>
<input type="text" name="callno3" class="inputs" id="" maxlength="4" size="4" title="휴대폰끝자리" style="width:53px; height:25px;" required>
도움이 되셨으면 좋겠네요..
추천
8
8
댓글 5개
감사합니다....
저같은 초보에겐 유용한 정보네요...
저같은 초보에겐 유용한 정보네요...
write.skin.php 상단에 <script>
$(function() {
$(".inputs").keydown(function(e) {
var charLimit = $(this).attr("maxlength");
var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];
if (e.which == 8 && this.value.length == 0) {
$(this).prev('.inputs').focus();
} else if ($.inArray(e.which, keys) >= 0) {
return true;
} else if (this.value.length >= charLimit) {
$(this).next('.inputs').focus();
return false;
} else if (e.shiftKey || e.which <= 47 || e.which >= 106) {
return false;
} else if (e.shiftKey || (e.which >= 58 && e.which <= 95)) {
return false;
}
}).keyup (function () {
var charLimit = $(this).attr("maxlength");
if (this.value.length >= charLimit) {
$(this).next('.inputs').focus();
return false;
}
if(!num_regx.test(f.callno1.value)){
window.alert('숫자로 입력해주세요');
f.callno1.focus();
return ;
}
});
});
</script> 이렇게 넣었는데 </script> 이줄에서 오류가 나네요..머가 잘못된걸까요.. 그리고 저거 적용하고 list.skin.php에 <?php echo $list[$i]['callno1'] ?>.<?php echo $list[$i]['callno2'] ?>.<?php echo $list[$i]['callno3'] ?> 요렇게 입력해서 불러오려고 하는데 불러와지지도 않구요..
$(function() {
$(".inputs").keydown(function(e) {
var charLimit = $(this).attr("maxlength");
var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];
if (e.which == 8 && this.value.length == 0) {
$(this).prev('.inputs').focus();
} else if ($.inArray(e.which, keys) >= 0) {
return true;
} else if (this.value.length >= charLimit) {
$(this).next('.inputs').focus();
return false;
} else if (e.shiftKey || e.which <= 47 || e.which >= 106) {
return false;
} else if (e.shiftKey || (e.which >= 58 && e.which <= 95)) {
return false;
}
}).keyup (function () {
var charLimit = $(this).attr("maxlength");
if (this.value.length >= charLimit) {
$(this).next('.inputs').focus();
return false;
}
if(!num_regx.test(f.callno1.value)){
window.alert('숫자로 입력해주세요');
f.callno1.focus();
return ;
}
});
});
</script> 이렇게 넣었는데 </script> 이줄에서 오류가 나네요..머가 잘못된걸까요.. 그리고 저거 적용하고 list.skin.php에 <?php echo $list[$i]['callno1'] ?>.<?php echo $list[$i]['callno2'] ?>.<?php echo $list[$i]['callno3'] ?> 요렇게 입력해서 불러오려고 하는데 불러와지지도 않구요..
유용한 정보 감사합니다
좋은 자료 감사합니다
감사합니다....
