jQuery 키보드 이벤트 keydown과 keypress의 차이점에 대한 자세한 설명

키보드 이벤트는 키보드를 눌렀을 때 keydown -> keypress -> keyup 순서로 실행됩니다.

1. 텍스트 상자에 텍스트가 입력되기 전에 keydown 및 keypress 이벤트가 트리거됩니다. 이때 텍스트 상자의 텍스트가 keydown 또는 keypress 이벤트로 출력되면 키보드 이벤트가 발생하기 전의 텍스트가 트리거됩니다. 그리고 keyup 이벤트가 트리거되면 전체 키보드 이벤트 작업이 완료되고, 얻은 것은 키보드 이벤트가 트리거된 후의 텍스트입니다.

<input id="input" value="default" type="text" />
<script>var input = document.getElementById(&#39;input&#39;);
input.onkeydown = function() {
    console.log(&#39;onkeydown &#39; + this.value);
}
input.onkeypress = function() {
    console.log(&#39;onkeypress &#39; + this.value);
}
input.onkeyup = function() {
    console.log(&#39;onkeyup &#39; + this.value);
}</script>

텍스트 상자에 숫자 1을 입력하면 출력 결과는 다음과 같습니다.

onkeydown default
onkeypress default
onkeyup default1

2. keypress 이벤트와 keydown 및 keyup의 주요 차이점

1) 중국어 입력 방법에 대한 지원이 부족하고 중국어 입력에 응답할 수 없습니다.

2) 시스템 기능 키(예: 삭제, 백스페이스)에 응답할 수 없습니다. )

3) 이전 두 가지 제한으로 인해 keyCode는 keydown 및 keyup

3과 일치하지 않습니다. 즉, 텍스트 상자에 텍스트가 입력됩니다(아직 표시되지는 않지만). 이때는 PreventDefault이거나 false를 반환하는 경우 텍스트 상자에 텍스트를 입력하는 동작을 방지할 수 없습니다. 텍스트 상자에 텍스트를 입력하지 않으려면 keydown 또는 keypress 중에 차단해야 합니다.

<input id="input" value="default" type="text" />
<script>var input = document.getElementById(&#39;input&#39;);
input.onkeydown = function() {    //return false;
    console.log(&#39;onkeydown &#39; + this.value);
}
input.onkeypress = function() {    //return false;
    console.log(&#39;onkeypress &#39; + this.value);
}
input.onkeyup = function() {    return false;
    console.log(&#39;onkeyup &#39; + this.value);
}</script>

결과는 keydown 및 keypress 이벤트에서 텍스트 상자에 텍스트를 입력할 수 없습니다. 상자에 텍스트를 입력할 수 있습니다

4. textInput 이벤트

텍스트 상자의 키보드 응답 이벤트도 다음과 같이 실행됩니다. keydown -> textInput -> keyup

textInput 이벤트가 지원됩니다. DOM3에 의해 작성되었으며 주로 키 누르기를 대체하는 데 사용됩니다. 키 누르기와의 주요 차이점은 중국어 입력 방법에 대한 지원을 추가한다는 것입니다. 또 다른 점은 textInput은 편집 가능한 텍스트 영역(예: 입력, 텍스트 영역)에서만 트리거될 수 있다는 것입니다. 포커스를 얻을 수 있는

control

(예: 버튼)에 의해 트리거되지만 textInput 이벤트에 대한 지원은 현재 Safari 및 Chrome에서만 지원되지 않습니다.

위 내용은 jQuery 키보드 이벤트 keydown과 keypress의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!