개발 하자 빵찌니/JavaScript

[JavaScript] 자동 커서 이동

sarah.together 2017. 12. 11. 15:18
반응형

웹사이트에서 주민등록번호나 핸드폰 번호를 입력할 때 글자가 일정 수 이상이 되면 자동으로 다음 텍스트 박스로 이동되는 현상을 보실 수 있습니다.

 

이런 현상은 주로 회원가입 할 때 자주 보이며 이렇게 자동 커서 이동을 취함으로써 사용자가 보다 편리하게 웹사이트를 사용할 수 있게 해줍니다. 이에 JAVA로 웹개발을 할 때 구현 가능한 JSP 자동 커서 이동 방법을 소개해 드리겠습니다.

 

일단 소스 코드는 다음과 같습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
 
function moveCursor(textbox){
     
    if(textbox.value.length == 6){
        document.getElementById("code").focus();
    }
     
     
}
</script>
<body>
주민등록번호 :
    <input type="text" id="birth" onkeyup="moveCursor(this)">
    <input type="text" id="code">
</body>

 

위의 코드는 birth라는 텍스트 박스에 글자를 한자한자 입력할 때마다 moveCursor라는 펑션이 작동됩니다.

이 펑션이 작동되면 birth라는 텍스트박스에 적혀진 글자의 길이를 체크하게 되고 글자의 길이가 6이 되면 code라는 텍스트 박스로 자동으로 포커스가 이동되게 됩니다.

 

즉, 텍스트 박스의 글자가 6이 되면 자동 커서 이동이 구현되는 코드 입니다.

반응형