jQuery键盘事件keydown与keypress的区别详解
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支持。
以上就是jQuery键盘事件keydown与keypress的区别详解的详细内容,更多请关注其它相关文章!
下一篇: 实例讲解CSS3仿微信聊天气泡的方法
推荐阅读
-
jQuery中的on与bind绑定事件区别实例详解
-
Jquery中的prop()、data()与attr()区别详解
-
jquery 键盘事件的使用方法详解
-
详解JS与Jquery获得的对象的区别与联系
-
jQuery事件绑定与事件委托实例讲解,jQuery的方法bind,live,delegate,on的区别
-
jquery绑定事件 bind和on的用法与区别分析
-
JQuery的焦点事件focus() 与按键事件keydown() 及js判断当前页面是否为*页面 子页面刷新将*页面刷新 window.top.location
-
JQuery事件中mouseover与mouseenter以及mouseout与mouseleave的区别详解
-
尝试比较jquery的serializeArray、param 与serializeArray 的区别与用法实例详解
-
Jquery中attr与prop的区别详解