제이쿼리를 통해 전화번호 입력시 자동으로 커서가 이동하는 기능을 구현했다.
이벤트 리스너를 추가하고 .focus() 메서드를 이용해 커서를 옮겨주고 substr을 통해 자릿 수를 채워 넣는 로직을 구현했다.
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name ="tel">
<option value ="010">010</option>
<option value ="010">011</option>
<option value ="010">019</option>
</select>
<span class="wave">-</span>
<input type="text" name="tel" id = "first_num" char="n" maxlength="4" class="input-num-size" maxlength='3'><label for="" class="blind"></label>
<span class="wave">-</span>
<input type="text" name="tel" id = "second_num" char="n" maxlength="5" class="input-num-size" maxlength='4'><label for="" class="blind"></label>
<script>
var first_num = $("#first_num");
var second_num = $("#second_num");
first_num.on("keyup",
function(){
console.log($(this).val().length)
if ($(this).val().length >= 3){
console.log("on")
second_num.focus();
second_num.attr("maxlength","5")
}
});
second_num.on("keyup",
function(){
if($(this).val().length == 5){
if(first_num.val().length==3) {
first_num.val(first_num.val()+$(this).val().substr(0,1));
second_num.val($(this).val().substr(1,4));
second_num.attr("maxlength","4")
}else if(second_num.val.length==5){
second_num.val($(this).val().substr(0,4));
}
}
});
</script>
</body>
</html>
"경의를 표해라. 경의를 갖고 회전의 다음 단계로 나아가는 거다…… [LESSON 4] 다."