视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery键盘事件keydown与keypress的区别详解
2020-11-27 20:18:24 责编:小采
文档


按下键盘时会触发键盘事件,顺序为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支持。

下载本文
显示全文
专题