09009

[Javascript] 입력 양식 포커스 - 회원가입 양식 본문

Front-End/Javascript
[Javascript] 입력 양식 포커스 - 회원가입 양식
09009 2023. 4. 4.

인터넷 웹 사이트의 회원가입 양식에서 전화번호 또는 주민등록번호를 입력할 때 앞자리를 입력하자마자

자동으로 뒷자리를 입력하는 칸으로 이동하는 경우가 있다.

→ 첫번째 입력 양식에 여섯번째 글자를 입력하면 자동으로 두번째 입력 양식에 포커스가 맞추어지도록

자바스크립트를 사용하였기 때문에 볼 수 있는 것이다.

 

아래 소스코드를 통해 예시를 확인해보자.

 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            // 문서 객체를 선택합니다.
            var input_1 = document.querySelectorAll('input')[0];
            var input_2 = document.querySelectorAll('input')[1];

            // input_1
            input_1.onkeydown = function() {
                // 글자 개수가 6개 이상일 떼
                if (input_1.value.length >= 6) {
                    // input_2 문서 객체로 포커스
                    input_2.focus();
                }
            };

            // input_2
            input_2.onkeydown = function (event) {
                // 이벤트 객체를 추출합니다.
                var event = event || window.event;
                // 사용자의 입력이 '백 스페이스'고 입력된 글자가 없을 때
                if (event.keyCode == 8 && input_2.value.length == 0) {
                    input_1.focus();
                }
            };
        };
    </script>
</head>
<body>
    <input type="text" maxlength="6">   
    <span>-</span>
    <input type="text" maxlength="7">
    <button>클릭</button>
</body>
</html>

onkeydown: 키를 눌렀을 때 발생하는 키보드 이벤트

---------------------------------------

event.keycode

- 백스페이스(←) : 8

- 엔터(enter) : 13

- ESC : 27

---------------------------------------

소스코드를 실행하면 아래와 같이 주민등록번호를 입력할 수 있는 양식이 나온다.

💻 출력

첫번째 입력 칸을 선택하고 글자를 입력하다 보면 커서가 자동으로 두번째 입력 칸으로 이동한다.

그리고 두번째 입력 칸에서 입력한 숫자를 지우다 보면 커서가 자동으로 첫번째 입력 칸으로 넘어간다.

 


keyCode 확인

알고 싶은 키를 누르면 경고 창에 keyCode 값이 나타난다.

 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            window.onkeydown = function (event) {
                alert(event.keyCode);
            }
        }
    </script>
</head>
<body>
   
</body>
</html>

💻 출력

ESC를 눌렀을 때 나오는 화면
엔터 키를 눌렀을 때 나오는 화면

 

'Front-End > Javascript' 카테고리의 다른 글

[JS] DOM 조작 기초  (0) 2023.05.24
[Javascript] 프레임 애니메이션  (0) 2023.04.04
[Javascript] 이벤트  (0) 2023.04.03
[Javascript] 문서 객체 조작  (0) 2023.04.03
[Javascript] 문서 객체 모델  (0) 2023.04.03