[JavaScript] STUDY 17 - 키보드 이벤트 & 입력 양식 이벤트

 

 

 

 

 

 

1. 키보드 이벤트

 

● 키보드 이벤트 발생 순서

 

• 사용자가 키보드를 누름
• keydown 이벤트 발생
• 글자 입력
• keypress 이벤트 발생
• 사용자가 키보드에서 뗌
• keyup 이벤트 발생

 

2. 키보드 이벤트 객체의 속성

 

 

※ keyCode 목록

 

key	keyCode	key	keyCode	key	keyCode
0	48	Backspace	8	Space	32
1	49	Tab	9	Page Up	33
2	50	Enter	13	Page Down	34
8	56	Shift	16	End	35
9	57	Control	17	Home	36
a	65	Alt	18	Arrow Left	37
s	66	Pause/Break	19	Arrow Up	38
y	89	Caps Lock	20	Arrow Right	39
z	90	ESC	27	Arrow Down	40

 

 

3. 입력 양식 이벤트

 

submit 이벤트의 예시

 

<script>
    window.onload = function () {
        var form = document.getElementById("userForm");

        form.onsubmit = function () {
            alert(form.address.value);
            // value 속성은 입력 요소에 사용자가 입력한 값을 담고 있다.

            return false;
            // 기본 이벤트 제거, 따라서 서버로 전송되지 않는다.
        };
    };
</script>

<form action="/do/action" method="post" id="useForm">
    <input type="text" name="address" value="">
    <input type="submit" name="go" value="Go!">
</form>

<script>
    var form = document.getElementById("userForm");

    form.onsubmit = function () {
        // checked 속성은 input 요소의 체크 상태에 따라 true 혹은 false 값을 가지고 있다.
        if (form.allow.checked == true) {
            alert("OK! Checked");
            return false;
        }
        else {
            alert("You must check the checkbox!");
            return false;
        }
    };
</script>

<form action="/do/action" method="post" id="useForm">
    <input type="checkbox" name="allow">
</form>