事件文本框键盘事件keydown,keypress,keyup区别
2013-05-12 19:11
519 查看
文章结束给大家来个程序员笑话:[M]
按下键盘时会触发键盘事件,次序为keydown -> keypress ->keyup。
1、keydown、keypress事件触发在文字还没敲进文本框,这时如果在keydown、keypress事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时全部键盘事件的操作已完成,获得的是触发键盘事件后的文本
在文本框中敲入数字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时阻止
每日一道理
俄国作家契诃夫说:“有大狗,有小狗,小狗不该因为大狗的存在而心慌意乱。所有的狗都应该叫,就让他各自用上帝给他的声音。
结果为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支撑。
文章结束给大家分享下程序员的一些笑话语录: 一个合格的程序员是不会写出 诸如 “摧毁地球” 这样的程序的,他们会写一个函数叫 “摧毁行星”而把地球当一个参数传进去。
按下键盘时会触发键盘事件,次序为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支撑。
文章结束给大家分享下程序员的一些笑话语录: 一个合格的程序员是不会写出 诸如 “摧毁地球” 这样的程序的,他们会写一个函数叫 “摧毁行星”而把地球当一个参数传进去。
相关文章推荐
- 键盘事件keypress 和 keydown、keyup 的用法与区别
- 键盘事件keydown,keypress,keyup区别
- 键盘事件之keydown keypress keyup区别
- C# 如何关联键盘按钮 (KeyChar/KeyCode值 KeyPress/KeyDown事件 区别)
- C# 如何关联键盘按钮 (KeyChar/KeyCode值 KeyPress/KeyDown事件 区别)
- js捕获键盘事件之keydown、keyup以及keypress
- Javascript跨浏览器处理键盘事件keydown,keypress,keyup
- C# 如何关联键盘按钮 (KeyChar/KeyCode值 KeyPress/KeyDown事件 区别)
- keyDown keyPress keyUp 事件的区别
- 解决 jquery在iOS系统自带键盘无法触发keyup,keydown,keypress事件
- javascript KeyDown、KeyPress和KeyUp事件的区别与联系
- 键盘事件keydown、keypress、keyup随笔整理总结
- 键盘事件keydown、keypress、keyup分析解答
- 键盘事件keydown、keypress、keyup随笔整理总结
- 【c#】键盘事件(keypress keydown keyup)
- 键盘事件keydown、keypress、keyup随笔整理总结(摘抄)
- 部分无线终端不响应键盘事件(keydown,keypress,keyup)的解决办法
- C# 如何关联键盘按钮 (KeyChar/KeyCode值 KeyPress/KeyDown事件 区别)
- 键盘事件keydown、keypress、keyup随笔整理总结(摘抄)
- KeyDown、KeyPress和KeyUp事件的区别与联系