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）無法回應系統功能鍵（如delete，backspace）

3）由於前面兩個限制，keyCode與keydown和keyup不是很一直

 

3、在keyup事件中無法阻止瀏覽器預設事件，因為在keypress時，瀏覽器預設行為已經完成，即將文字輸入文字方塊（儘管這時還沒顯示），這個時候不管是preventDefault還是return 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事件中return false文本框無法輸入文字，在keyup事件中return false文本框可以輸入文字

 

4、textInput事件

文字方塊的鍵盤回應事件把textInpput也加進來，觸發的順序為：keydown -> keypress ->textInput -> keyup

textInput事件是DOM3後支持的，主要用來替換keypress，與keypress的主要差別在於添加了對中文輸入法的支持，還有一點就是textInput只在可編輯文本區才能觸發（如input 、textarea），而keypress是任何能獲得焦點的控制的能觸發（如button），但是textInput事件的支援還不是很好，目前只有safari、chrome支援。

以上是jQuery鍵盤事件keydown與keypress的差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！