鍵盤事件keydown,keypress,keyup區別

按下鍵盤時會觸發鍵盤事件，順序為keydown -> keypress ->keyup。

1、keydown、keypress事件觸發在文字還沒敲進文本框，這時如果在keydown、keypress事件中輸出文本框中的文本，得到的是觸發鍵盤事件前的文本，而keyup事件觸發時整個鍵盤事件的操作已經完成，獲得的是觸發鍵盤事件后的文本

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown = function() {
    console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
    console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
    console.log('onkeyup ' + 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('input');
input.onkeydown = function() {
    //return false;
    console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
    //return false;
    console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
    return false;
    console.log('onkeyup ' + 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支持。