1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > jQuery键盘事件keydown与keypress的区别详解

jQuery键盘事件keydown与keypress的区别详解

时间:2021-10-09 20:58:36

相关推荐

jQuery键盘事件keydown与keypress的区别详解

web前端|js教程

keypress,keydown,jQuery

web前端-js教程

按下键盘时会触发键盘事件,顺序为keydown -> keypress ->keyup。

tob主题源码,进去ubuntu桌面空白,tomcat要启动数据库吗,爬虫生态饲养缸,php程序员面试都会问什么,seo title标签lzw

1、keydown、keypress事件触发在文字还没敲进文本框,这时如果在keydown、keypress事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本

视频网校系统源码,ubuntu怎样远程登录,tomcat+出现繁体字,懒人爬虫神器,宁德php程序员招聘,永泰seo推广lzw

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);}

在文本框中敲入数字1,输出结果为:

后台 静态 源码,vscode设计界面,ubuntu pak,tomcat远程d,sqlite3同步模式,WordPress订阅下载插件,安卓软件前端用什么框架,爬虫中times是啥意思,php 跨站攻击,学校seo优化建议,商城网站建设二次开发,js网页文字自动特效模板,class选择器模板lzw

onkeydown defaultonkeypress defaultonkeyup default1

2、keypress事件与keydown和keyup的主要区别

1)对中文输入法支持不好,无法响应中文输入

2)无法响应系统功能键(如delete,backspace)

3)由于前面两个限制,keyCode与keydown和keyup不是很一直

3、在keyup事件中无法阻止浏览器默认事件,因为在keypress时,浏览器默认行为已经完成,即将文字输入文本框(尽管这时还没显示),这个时候不管是preventDefault还是return false,都不能阻止在文本框中输入文字的行为,如要阻止在文本框中输入文字,必须在keydown或keypress时阻止

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);}

结果为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支持。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。