• 键盘事件


    浏览器有3个传统的键盘输入事件。keydownkeyup事件是低级事件,不过,keypress事件是叫高级的事件,它产生了一个可打印字符。

    当用户在键盘上按下或释放按键时,会发生keydown和keyup事件。它们由辅助键、功能键和字母数字键产生。如果用户按键时间足够长会导致它们开始重复,那么在keyup事件到达之前会收到多个keydown事件。

    注释:辅助键一般是指Shift、Ctrl、Alt、AltCr、Super(window键盘上是指Window键,Mac OS键盘上是指Command键,Sun键盘上指Meta键)和Fn键。功能键包括如下: Esc、Tab、Caps Lock、Enter、Backspace、Print Screen、Scroll Lock、Pause Break、Insert、Delete、Home、End、Page Up、Page Down, F1 through F12,Num Lock、The Arrow Keys。

    ================================================================================

    英文输入法:

    • 事件触发顺序:keydown - > keypress - > keyup

    中文输入法:

    • firfox:输入触发keydown,回车确认输入触发keyup
    • chrome:输入触发keydown、keyup,回车确认输入只触发keydown
    • IE:输入触发keydown、keyup,回车确认输入触发keydown,keyup
    • Safari:输入触发keydown、keyup,回车确认输入触发keydown,keyup
    • opera:输入触发keydown、keyup,回车确认输入触发keydown,keyup

    ================================================================================

    这些事件对象都有数字属性keyCode,指定了按下的键是哪个。对于产生可打印字符的按键,keyCode值是按键上出现的主要字符的Unicode编码。无论Shift键处于什么状态,字母键总是产生大写的keyCode值,这是因为它们出现在物理键盘上。类似的,即使为了输入标点符而按下了Shift键,但数字键产生的keyCode值就是出现在对应键上的数字。对于不可打印键,keyCode属性将是一些其他值。

    keyCode(键码), which, charCode(字符编码)

    keydown: 获得keyCode, charCode=0

    keypress: 字符(英文区分大小写+数字 / * , . ...等非功能键),keyCode=0 ,获取charCode值, 反之获取keyCode, charCode=0

    keyup: 获得keyCode, charCode=0

    开启大写情况,keydown、keypress、keyup,keyCode值相等,小写kepress获取的keyCode不同于keypress、keyup,keypress事件的keyCode对字母的大小写敏感,而keydown、keyup事件不敏感。

    ================================================================================

    以下是分别在chrome浏览器和Firefox浏览器当我按下小写“f”键,“Alt”辅助键和“Home”功能键所触发的keydown事件的事件对象。

    3级DOM事件中定义了新属性key,它会以字符串的形式包含键名。如果按键对应的是一个可打印的字符,那么key属性将仅仅是这个可打印字符。如果按键是功能键,那么key属性将是像“F2”、“Home”或“Left”这样的值。从上面测试可以看到,chrome这类基于webkit的浏览器为这些事件的事件对象定义了一个keyIdentifier属性。类似key,keyIdentifier是字符串而非数字,并且对于功能键,它是像“Shift”、“Enter”这样有用的值。但对于可打印字符,该属性保存了这个字符的Unicode编码的字符串表示形式,其用处要小一些。例如,对于A键,它是“U+0041”。

  • 相关阅读:
    NFS-heartbeat-drbd模拟NFS高可用
    drbd
    hearbeat
    ldap
    SVN
    Nginx负载均衡
    shell-day1
    angularJS(二):作用域$scope、控制器、过滤器
    angularJS(一):表达式、指令
    nodejs、npm、 typescript、angular-cli安装
  • 原文地址:https://www.cnblogs.com/sugar-tomato/p/4535263.html
Copyright © 2020-2023  润新知