详解键盘事件(keydown,keypress,keyup)

一、键盘事件基础

1、定义
  • keydown:按下键盘键
  • keypress:紧接着keydown事件触发(只有按下字符键时触发)
  • keyup:释放键盘键

顺序为:keydown -> keypress ->keyup

2、示例
<script>
    function keydown(event) {
        console.log('keydown');
    }
    function keypress(event) {
        console.log(event.keyCode);
        console.log(event.charCode);
        console.log('keypress');
    }
    function keyup(event) {
        console.log('keyup');
    }
</script>
<input type="text" onkeydown="keydown()" onkeypress="keypress()" onkeyup="keyup()" />

3、详解

1)用户按下键盘上的字符键时

  • 首先会触发keydown事件
  • 然后紧接着触发keypress事件
  • 最后触发keyup事件
  • 如果用户按下了一个字符键不放,就会重复触发keydownkeypress事件,直到用户松开该键为止

2)当用户按下非字符键时

  • 首先会触发keydown事件
  • 然后就触发keyup事件
  • 如果用户按下了一个非字符键不放,就会重复触发keydown事件,直到用户松开该键为止

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

<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)发生keypress事件意味着按下的键会影响到屏幕中文本的显示,即在所有浏览器中,按下能够插入或删除字符的键都会触发keypress事件

二、键码和键盘事件

  • 系统功能键Esc、Tab、CapsLk、Shift、Ctrl、Alt、Enter、Backspace、Print Screen、Scroll Lock、Pause Break、Insert、Delete、Home、End、Page Up、Page Down, F1 ~ F12,Num Lock、The Arrow Keys
1、键盘中的键
  • 分为 字符键 (可打印) 和 功能键 (不可打印)
  • keypress支持的系统功能键
  • FirefoxEsc、Enter、Backspace、Pause Break、Insert、 Delete、Home、End、Page Up、Page Down、F1 through F12、The Arrow Keys、上下左右键
  • Chrome / Oprea / SafariEnter
  • IEEsc、Enter
  • 除了 Firefox,其他chrome、oprea、safari、IE 上下左右键不会触发kepress
2、keyCode(键码)、which、charCode(字符编码)

简写记忆:

  • keydown: 获得keyCode, charCode=0
  • keyup: 获得keyCode, charCode=0
  • keypress: 字符keyCode=0,获取charCode值,反之获取keyCodecharCode=0

详述:

  • event对象包含一个keyCode属性和一个charCode属性
  • 当捕捉的是keydownkeyup事件时,keyCode表示的就是你具体按的键(也称为virtual keycode),charCode为0
  • 当捕捉的是keypress事件时,keyCode为0,charCode指的是你按下的字符(而 IE 只有一个KeyCode属性,它指的是你键入的字符(character code))
    鉴于 IE 和 FF 中的区别,建议只使用keydowkeyup事件
3、keypress 和 keydown / keyup 的区别

区别简述

  • 1)keypress 对中文输入法支持不好,无法响应中文输入
  • 2)keypress 无法响应系统功能键(如delete,backspace
  • 3)由于前面两个限制,keydown和keyupkeyCode不敏感

区别详解

  • 对系统功能键的响应方面

    • keypress事件不能对系统功能键(对中文输入法不能有效响应)进行正常的响应
    • keydownkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同
  • keyCode对字母的大小写敏感程度

  • keypress事件的keyCode对字母的大小写敏感

  • keydown、keyup事件不敏感

  • 主附键盘的数字键敏感程度

  • keypress事件的which值无法区分主键盘上的数字键和附键盘数字键的

  • keydown、keyup事件的which值对主附键盘的数字键 敏感

4、需要注意的地方
  • 1)英文输入法

  • 所有浏览器都支持这三个事件

  • 2)中文输入法(浏览器之间表现得不太一致)

  • IE,Chrome,Safari:触发keydown和keyup, 不触发keypress

  • Firefox

    • 首次按下时触发keydown,不触发keypress
    • 在停止输入并改变文本框内容(如按下回车或者空格键)后会触发keyup只有在触发keyup事件才能获得修改后的文本值)
  • Operakeydown, keypress和keyup都不触发

  • 3)大小写

  • 大写:keydown、keypress(字母,主键盘数字、回车)、keyupwhich值相等

  • 小写:kepress获取的which不同于keydown、keyup

5、keyCode对照表

相关文章推荐:
JS键盘事件
键盘事件keydown,keypress,keyup
键盘事件keydown,keypress,keyup区别
键盘事件keydown、keypress、keyup随笔整理总结
Javascript跨浏览器处理键盘事件keydown,keypress,keyup

推荐阅读更多精彩内容

  • 对键盘事件的支持主要遵循DOM0级,虽然DOM3级为键盘事件制定了规范,但是并不是所有浏览器的支持的。为了提高网页...
    Miss____Du阅读 1,092评论 6 6
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,395评论 2 10
  • 在使用SeleniumWebDriver 做自动化测试的时候,会经常模拟鼠标和键盘的一些行为。比如使用鼠标单击、双...
    guitar_当当当阅读 688评论 0 3
  • Web 浏览器中可能发生的事件有很多类型。如前所述,不同的事件类型具有不同的信息,而 DOM3 级事件规定了以下几...
    More_5897阅读 557评论 1 0
  • 今天要和大家分享的书名叫《落差:如何化解我们内心的失望》,这本书名看起来就让人想读啊。不知道大家是怎样的,我自己是...
    金钱小豹阅读 111评论 0 0
  • 写点故事吧。每天学习着不知道的知识,看着各种不同的数据,就是想让自己变成想象中的自己,让自己的生活变成想象中的生活...
    蒹葭如梦阅读 92评论 0 0
  • 少年不是过去式 他总被描述为曾经的过往,逝去的时光。也许一个少年的心总是太短暂,短到转瞬间便要被回忆。 当少年的肉...
    老师说阅读 2,111评论 47 40
  • 送别,是曾经的“孤帆远影碧空尽”,是曾经的“雪上空留马行处”,是曾经的“挥手自兹去”……那种慢,如今没有了。或许...
    Love眼前人阅读 98评论 0 0