06. Javascript/기초

14. 자바스크립트 (JavaScript) - IE 의 keypress 와 Chrome, Edge 의 keypress 차이점

THE HEYDAZE 2021. 7. 2. 16:08
  OS   Windows 10 PRO 64bit 버전 20H2 (OS 빌드 19042.867)
  JavaScript   ES5 (2009年)

 

동작방식 보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function key1() {
            var card1 = document.getElementById('card1').value
            if (card1.length === 4) {
                document.getElementById('card2').focus()
                console.log('증가')
            }
        }
      
        function key2() {
            var card3 = document.getElementById('card3').value
            if (card3.length === 4) {
                document.getElementById('card4').focus()
                console.log('증가')
            }
        }

    </script>
</head>
<body>
<input type="text" id="card1" name="card1" onkeypress="key1()">
<input type="text" id="card2" name="card2">

<input type="text" id="card3" name="card3" onkeyup="key2()">
<input type="text" id="card4" name="card4">

</body>
</html>

 

Chrome  IE

같은 코드로 실행하였는 데 다른 결과가 나온다

keypress 이벤트에 동작방식이 다르기 때문이다

크롬은 event 를 완료 한 뒤 keypress 입력이 되어 2번째 input 갔다가 1번째로 input 으로 돌아오는 반면

IE 는 keypress 가 입력 된 후 이벤트가 작동 되어 input2 가는 것이다

 

크롬이 input2 를 갔다가 input1 로 돌아오는 것을 보기위한 방법
1번째 확인 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function key1() {
            var card1 = document.getElementById('card1').value
            console.log(card1.length)
            if (card1.length === 4) {
                document.getElementById('card2').focus()
                alert('card2 input focus 되었음')
                console.log('증가')
            }
        }
        function key2() {
            var card3 = document.getElementById('card3').value
            console.log(card3.length)
            if (card3.length === 4) {
                document.getElementById('card4').focus()
                console.log('증가')
            }
        }
    </script>
</head>
<body>
<input type="text" id="card1" name="card1" onkeypress="key1()">
<input type="text" id="card2" name="card2">

<input type="text" id="card3" name="card3" onkeyup="key2()">
<input type="text" id="card4" name="card4">
</body>
</html>

 

2번째 확인 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function key1() {
            var card1 = document.getElementById('card1').value
            console.log(card1.length)
            if (card1.length === 4) {
                document.getElementById('card2').focus()
                console.log('증가')
            }
        }
        function key2() {
            var card3 = document.getElementById('card3').value
            console.log(card3.length)
            if (card3.length === 4) {
                document.getElementById('card4').focus()
                console.log('증가')
            }
        }
        
        window.onload = function() {
            var card2 = document.getElementById('card2')
            card2.addEventListener('focus', function() {
                alert('card2에 focus 이벤트가 감지 되었음')
            })
        }
    </script>
</head>
<body>
<input type="text" id="card1" name="card1" onkeypress="key1()">
<input type="text" id="card2" name="card2">

<input type="text" id="card3" name="card3" onkeyup="key2()">
<input type="text" id="card4" name="card4">

</body>
</html>
저작자표시

'06. Javascript > 기초' 카테고리의 다른 글

16. 자바스크립트 (JavaScript) - Object.keys, Object.values, Object.entries  (0) 2021.09.02
??. 자바스크립트 클로즈의 개념  (0) 2021.07.07
13. 자바스크립트 (JavaScript) - blob 이미지 처리  (0) 2021.06.15
12. 자바스크립트 (JavaScript) - 축약  (0) 2021.06.10
11. 자바스크립트 (JavaScript) - 2개이상의 obj 합치기 ( Object.assign )  (0) 2021.06.09

'06. Javascript/기초'의 다른글

  • 현재글14. 자바스크립트 (JavaScript) - IE 의 keypress 와 Chrome, Edge 의 keypress 차이점

관련글

티스토리툴바