Detailed explanation of the difference between jQuery keyboard event keydown and keypress

Keyboard events will be triggered when the keyboard is pressed, in the order of keydown -> keypress ->keyup.

1. The keydown and keypress events are triggered before the text is typed into the text box. At this time, if the text in the text box is output in the keydown or keypress events, the text before the keyboard event is triggered, and the keyup When the event is triggered, the entire keyboard event operation has been completed, and what is obtained is the text after the keyboard event is triggered.

<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>

Type the number 1 in the text box, and the output result is:

onkeydown default
onkeypress default
onkeyup default1

2, keypress The main difference between events and keydown and keyup

1) Does not support Chinese input method well and cannot respond to Chinese input

2) Cannot respond to system function keys (such as delete, backspace)

3) Due to the previous two limitations, keyCode is not consistent with keydown and keyup

3. The browser default event cannot be prevented in the keyup event, because during keypress, browsing The default behavior of the device has been completed, that is, text is entered into the text box (although it is not displayed yet). At this time, neither preventDefault nor return false can prevent the behavior of entering text in the text box. If you want to prevent Entering text in the text box must be blocked during keydown or 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>

The result is return false in the keydown or keypress event. The text box cannot enter text, and return false in the keyup event. The text box can enter text

4. textInput event

The keyboard response event of the text box also adds textInpput. The triggering sequence is: keydown -> keypress ->textInput -> keyup

The textInput event is supported by DOM3 and is mainly used to replace keypress. The main difference with keypress is that it adds support for the Chinese input method. Another point is that textInput can only be triggered in the editable text area (such as input , textarea), and keypress can be triggered by any control that can gain focus (such as button), but the support for textInput events is not very good. Currently only safari and chrome support it.

The above is the detailed content of Detailed explanation of the difference between jQuery keyboard event keydown and keypress. For more information, please follow other related articles on the PHP Chinese website!