• Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件


    键盘与文本事件

    用户在使用键盘时会触发键盘事件

    “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容

    所以键盘事件被放入了DOM3级事件的规范中

    总的来说有三个键盘事件:

    1. keydown:当用户按下键盘上的任意键时触发,按住不放会重复触发
    2. keypress:用户按下键盘上的字符键时触发,按住不放重复触发(按下ESC键也会触发)
    3. keyup:用户释放按键触发

    所有元素都支持上述三个事件,但只有用户通过文本文本框输入文本时比较常用

    文本事件只有一个就是 textInput 事件

    该事件是对keypress 的补充

    其目的在于将文本显示给用户之前实现拦截,在文本插入文本框之前都会触发该事件

    以上事件中 keydown 和 keypress 事件会在文本框发生变化之前触发

    keyup则会在文本框变化之后触发,若按住键不放则会持续触发 keypress 和 keydown,直到用户释放按键时才触发 keyup

    总的来说触发顺序如下:

    1. keydown
    2. keypress
    3. textInput
    4. 文本改变
    5. keyup

    PS.键盘事件也支持修改键属性:shiftKey、ctrlKey、altKey、、metakey

    键码

    在发生keydown 和 keyup 事件时,event对象的 keyCode 属性中会包含一个代码,与键盘上的键对应,即键码

    所有非字符键的键码如下表所示:

    键  码
    退格(Backspace) 8
    制表(Tab) 9
    回车(Enter) 13
    上档(Shift) 16
    控制(Ctrl) 17
    Alt 18
    暂停/中断(Pause/break) 19
    大写锁定(Caps Lock) 20
    退出(ESC) 27
    上翻页(Page Up) 33
    下翻页(Page Down) 34
    结尾(END) 35
    开头(Home) 36
    左箭头 37
    上箭头 38
    右箭头 39
    下箭头 40
    插入(Ins) 45
    删除(Del) 46
    左Window 91
    右Window 92
    上下文菜单 93
    小键盘0 96
    小键盘1 97
    小键盘2 98
    小键盘3 99
    小键盘4 100
    小键盘5 101
    小键盘6 102
    小键盘7 103
    小键盘8 104
    小键盘9 105
    小键盘+ 107
    小键盘及大键盘— 109
    小键盘. 110
    小键盘/ 111
    F1

    112

    F2 113
    F3 114
    F4 115
    F5 116
    F6 117
    F7 118
    F8 119
    F9 120
    F10 121
    F11 122
    F12 123
    数字锁(Num Lock) 144
    滚动锁(Scroll Lock) 145
    分号(IE/Safari/Chrome) 186
    分号(Opera/FF) 59
    小于 188
    大于 190
    正斜杠 191
    沉音符(`) 192
    左方括号 219
    反斜杠 220
    右方括号 221
    单引号 22
    等于 61

    字符编码

    发生 keypress 事件意味着按下的键会影响到屏幕中的文本信息

    在所有浏览器,按下能够插入或 删除字符的键都会触发 keypress 事件

    主流浏览器 keypress 事件的 event 对象都支持一个 charCode 属性

    该属性只有发生 keypress 事件的时候才有值,这个值通常是按下键的 ASSCII 编码

    此时的keyCode 通常等于零 或者按键的键码

    若需要跨浏览器获取字符编码 可以使用以下的代码:

    function getCharCode(event){
        if(typeof event.charCode ==="number"){
            return event.charCode;
        }else{
            return event.keyCode;
        }
    }

    DOM3级变化

    我们知道 DOM2级事件主要是关于 addEventListener 等规范,DOM3级事件主要规范的则是键盘事件

    尽管所有浏览器都实现了某种形式的键盘事件,DOM3级事件还是做出了一些改变:

    DOM3级事件中的键盘事件将不再包含 charCode 属性,取而代之的时两个新属性:key 和 char

    key:用于取代 keyCOde 而新增,其值为一个字符串。按下字符键时key的值为按键对应的字符,按下非字符按键其值则是键对应的名如(shift)

    char:对于字符按键行为与 key 相同,非字符按键其值为null

    此外DOM3级事件还添加了名为 location 的属性,是一个数值,表示按下了什么位置上的键

    0:默认键盘

    1:左侧

    2:右侧

    3:小键盘

    4:移动设备键盘

    5:手柄

    最后还给 event 对象添加了 getModifierState()方法

    该方法接收一个参数,即 shift 、meta等修改键名的字符串,表示要检测的修改键,若调用该方法时修改键处于被按下的状态则返回 true 否则返回 false

    textInput事件

    该事件是 DOM3级规范引入的新事件,根据规范,当用户在可编辑区域输入字符时则会触发该事件

    该事件与 keyPress 事件的区别在于,textInput 只有可编辑区域才能触发,而keypress 任何可以获得焦点的元素都能触发

    由于textinput 事件主要考虑的是字符,因此他的event对象中还包含一个属性 data

    该属性的值为用户输入的字符

    此外  event 对象上还有一个属性叫做 inputMethod,表示文本输入到文本框中的方式

    0:浏览器不确定的方式

    1:键盘输入

    2:粘贴

    3:拖放

    4:使用IME(输入法编辑器)输入

    5:表单选择输入

    6:手写输入

    7:语音输入

    8:组合输入

    9:脚本输入

  • 相关阅读:
    mysql prepare语句使用
    mysql 存储过程中的declare 和 set @的两种变量的区别
    Redis命令总结
    系统架构师
    php 大数组的POST问题解决
    ubuntu设置系统时间与网络时间同步
    JAVA开发者最常去的20个英文网站
    文件上传之一句话木马原理及制作
    Postman怎么进行参数化
    单元测试、接口测试、功能测试的区别
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10382586.html
Copyright © 2020-2023  润新知