카테고리 없음

키보드이벤트

psys 2020. 7. 1. 11:49
728x90

keypress

keypress 는 영어, 숫자가 눌렸을 때에만 이벤트가 발생

또한 한글, 방향키, del, space 등은 keypress 이벤트를 발생시키지 않음

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type=text value="" onkeydown="f_check()"><br>
    <input type=text value="" onkeypress="f_check2()"><br>
    <script>
        // 일반적으로는 특수키 입력까지 받아들이는 keyDown 이벤트를 많이 사용
        function f_check2() {
            alert(event.keyCode);
        }
        function f_check() {
            alert(event.keyCode);
        }
    </script>
</body>

</html>

 

keydown

키 범위가 넓다.

 

첫 번째 텍스트박스에서 엔터키를 누르면

두 번째 텍스트박스로 커서가 넘어간다.

<body>
    <input type=text value="" onkeydown="f_check()"><br>
    <input type=text id="id_txt2" value="" onkeypress="f_check2()"><br>
    <script>
        // 일반적으로는 특수키 입력까지 받아들이는 keyDown 이벤트를 많이 사용
        function f_check2() {
            //alert(event.keyCode);
        }
        function f_check() {
            if(event.keyCode==13){ // 사용자가 엔터키를 입력했다면
            //마우스 커서를 주는 메소드 -> 객체.focus()
                document.getElementById("id_txt2").focus();
            }
        }
    </script>
</body>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type=text value="" onkeydown="f_check()"><br>
    <input type=text id="id_txt2" value="" onkeypress="f_check2()"><br>
<script>
    // 일반적으로는 특수키 입력까지 받아들이는 keyDown 이벤트를 많이 사용
    // 범위가 넓어서
    function f_check2(){
       // alert(event.keyCode);
    }
    function f_check(){
        if(event.keyCode == 13){  // 사용자가 엔터키를 입력했다면
            //마우스 커서를 주는 메소드 -> 객체.focus()
            document.getElementById("id_txt2").focus();
        }
    }
</script>
</body>
</html>

 

엔터키로 텍스트박스끼리 왔다갔다하기

<body>
    <input type=text id="id_txt1" value="" onkeydown="f_check()"><br>
    <input type=text id="id_txt2" value="" onkeydown="f_check2()"><br>
    <script>
        // 일반적으로는 특수키 입력까지 받아들이는 keyDown 이벤트를 많이 사용
        // 범위가 넓어서
        function f_check2() {
            if (event.keyCode == 13) {  // 사용자가 엔터키를 입력했다면
                //마우스 커서를 주는 메소드 -> 객체.focus()
                document.getElementById("id_txt1").focus();
            }
        }
        function f_check() {
            if (event.keyCode == 13) {  // 사용자가 엔터키를 입력했다면
                //마우스 커서를 주는 메소드 -> 객체.focus()
                document.getElementById("id_txt2").focus();
            }
        }
    </script>
</body>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type=text id="id_txt1" value="" onkeydown="f_check()"><br>
    <input type=text id="id_txt2" value="" onkeydown="f_check2()"><br>
    <script>
        // 일반적으로는 특수키 입력까지 받아들이는 keyDown 이벤트를 많이 사용
        // 범위가 넓어서
        function f_check2() {
            if (event.keyCode == 13) {  // 사용자가 엔터키를 입력했다면
                //마우스 커서를 주는 메소드 -> 객체.focus()
                document.getElementById("id_txt1").focus();
            }
        }
        function f_check() {
            if (event.keyCode == 13) {  // 사용자가 엔터키를 입력했다면
                //마우스 커서를 주는 메소드 -> 객체.focus()
                document.getElementById("id_txt2").focus();
            }
        }
    </script>
</body>

</html>

 

key를 사용하면 어떤 값이 눌렸는지 정확하게 나옴

    <script>
        function f_check2() {
            alert(event.key);
            if (event.keyCode == 13) {
                document.getElementById("id_txt1").focus();
            }
        }
        function f_check() {
            alert(event.key);
            if (event.keyCode == 13) {
                document.getElementById("id_txt2").focus();
            }
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type=text id="id_txt1" value="" onkeydown="f_check()"><br>
    <input type=text id="id_txt2" value="" onkeydown="f_check2()"><br>
    <script>
        // 일반적으로는 특수키 입력까지 받아들이는 keyDown 이벤트를 많이 사용
        // 범위가 넓어서
        function f_check2() {
            // keyCode 속성 말고 key를 쓰라고 권장하고 있으나
            // 개발자들이 말을 잘 안들음.
            alert(event.key);
            if (event.keyCode == 13) {  // 사용자가 엔터키를 입력했다면
                //마우스 커서를 주는 메소드 -> 객체.focus()
                document.getElementById("id_txt1").focus();
            }
        }
        function f_check() {
            alert(event.key);
            if (event.keyCode == 13) {  // 사용자가 엔터키를 입력했다면
                //마우스 커서를 주는 메소드 -> 객체.focus()
                document.getElementById("id_txt2").focus();
            }
        }
    </script>
</body>

</html>

 

내코딩

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
            position: relative;
            /* 자식을 부모 기준으로 움직이기 */
            margin: 0px auto;
            width: 500px;
            height: 90vh;
            background-color: rgba(124, 104, 238, 0.699);
        }

        #id_bar {
            position: absolute;
            /* 부모 왼쪽 모서리 기준으로 움직임*/
            width: 80px;
            height: 20px;
            bottom: 50px;
            background-color: rgba(152, 226, 32, 0.877);
        }
    </style>
</head>

<body>
    <div id="wrapper" tabindex="0" onkeydown="f_lrMove()">
        <div id="id_bar"></div>
    </div>
    <script>
        var v_bar = document.getElementById("id_bar");
        var v_parWidth = 400;
        var v_height = document.getElementById("wrapper");
        var v_mvWidth = 10;
        function f_lrMove() {
            // 좌우 화살표 눌렀을 때 막대 움직이기
            if (event.keyCode == 37) {   // 왼쪽 화살표
                v_bar.style.left = parseInt(v_bar.style.left) - v_mvWidth + "px";
                if (v_bar.style.left <= "0px") {
                    v_bar.style.left = "0px";
                }
            }
            if (event.keyCode == 39) {  // 오른쪽 화살표
                v_bar.style.left = parseInt(v_bar.style.left) + v_mvWidth + "px";
                if (v_bar.style.left >= v_parWidth + 19 + "px") {
                    v_bar.style.left = v_parWidth + 19 + "px";
                }
            }
            if (event.keyCode == 38) {  // 위쪽 화살표
                v_bar.style.bottom = parseInt(v_bar.style.bottom) + v_mvWidth + "px";
                if (v_bar.style.bottom >= "768px") {
                    v_bar.style.bottom = "768px";
                }
            }
            if (event.keyCode == 40) {  // 아래쪽 화살표
                v_bar.style.bottom = parseInt(v_bar.style.bottom) - v_mvWidth + "px";
                // console.log(v_bar.style.bottom);
                if (v_bar.style.bottom <= "0px") {
                    v_bar.style.bottom = "0px";
                }
            }
        }
        // 초기 세팅이 필요한 일들은 window.onload이벤트에 모아서
        window.onload = function () { // 페이지 로딩되고나면 자동 실행
            if (!v_bar.style.left) { // 초기값이 없을 때 초기값 강제 세팅
                v_bar.style.left = "0px";
            }
            if (!v_bar.style.bottom) {
                v_bar.style.bottom = "50px";
            }
        }
    </script>
</body>

</html>

강사님코딩

 

'카테고리 없음'의 다른글

  • 현재글키보드이벤트
댓글

티스토리툴바