事件文本框键盘事件keydown,keypress,keyup区别

时间：2021-03-04 19:41:32

文章结束给大家来个程序员笑话：[M]

    按下键盘时会触发键盘事件，次序为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支撑。

文章结束给大家分享下程序员的一些笑话语录： 一个合格的程序员是不会写出 诸如 “摧毁地球” 这样的程序的，他们会写一个函数叫 “摧毁行星”而把地球当一个参数传进去。


标签：

相关文章