Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件
键盘与文本事件
用户在使用键盘时会触发键盘事件
“DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容
所以键盘事件被放入了DOM3级事件的规范中
总的来说有三个键盘事件:
- keydown:当用户按下键盘上的任意键时触发,按住不放会重复触发
- keypress:用户按下键盘上的字符键时触发,按住不放重复触发(按下ESC键也会触发)
- keyup:用户释放按键触发
所有元素都支持上述三个事件,但只有用户通过文本文本框输入文本时比较常用
文本事件只有一个就是 textInput 事件
该事件是对keypress 的补充
其目的在于将文本显示给用户之前实现拦截,在文本插入文本框之前都会触发该事件
以上事件中 keydown 和 keypress 事件会在文本框发生变化之前触发
keyup则会在文本框变化之后触发,若按住键不放则会持续触发 keypress 和 keydown,直到用户释放按键时才触发 keyup
总的来说触发顺序如下:
- keydown
- keypress
- textInput
- 文本改变
- 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:脚本输入
Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件的更多相关文章
- Javascript高级编程学习笔记(57)—— 事件(1)事件流
事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...
- Javascript高级编程学习笔记(72)—— 模拟事件(2)IE事件模拟
IE中的事件模拟 低版本的IE浏览器作为前端开发的一股清流,想避过都不行 虽然低版本IE正在逐步被市场淘汰,不得不承认IE8以下的浏览器依然占了不小的份额 所以这里大概介绍IE8以下的低版本IE中的事 ...
- Javascript高级编程学习笔记(71)—— 模拟事件(1)DOM事件模拟
事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...
- Javascript高级编程学习笔记(70)—— 事件(14)内存和性能
由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#) ...
- Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件
触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...
- Javascript高级编程学习笔记(67)—— 事件(11)HTML5事件
DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...
- Javascript高级编程学习笔记(66)—— 事件(10)变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
- Javascript高级编程学习笔记(65)—— 事件(9)复合事件
复合事件 复合事件是 DOM3 中新增的一类事件,用于处理 IME 的输入序列 IME(输入法编辑器)通常用于输入物理键盘上找不到的字符,而这种输入方式通常需要同时按住多个键,但最终只输入一个字符 复 ...
- Javascript高级编程学习笔记(63)—— 事件(7)鼠标及滚轮事件
鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...
随机推荐
- Python:a,*args,**kwargs的理解
1.何时用这些参数? 在任何时候继承类和重写方法时,应当用到’*args’和’**kwargs’将接收到的位置参数和键值参数给父类方法 . 2.一句话清晰说明: a是常规的变量类型,比如int,str ...
- python3 requestsGET请求传参
GET方式传参方式一: import requests url = 'http://www.baidu.com/s?page=2' # 使用?携带参数 r = requests.get(url) pr ...
- 深入理解HashMap和CurrentHashMap
原文链接:https://segmentfault.com/a/1190000015726870 前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇 ...
- log4j 配置日志输出(log4j.properties)
轉: https://blog.csdn.net/qq_29166327/article/details/80467593 一.入门log4j实例 1.1 下载解压log4j.jar(地址:http: ...
- python基础之Day20part2
面向过程:核心是过程,解决问题的步骤,先干嘛后干嘛,机械流水线 复杂问题流程化简单化但扩展性差 面向对象:核心是对象,是特征与对象的集合体,基于该思想编写程序,就好比上帝造世界,上帝式的思维方式 扩展 ...
- UI设计学习之工具中的色彩模式分析
图像根据其呈现的颜色样式分为多种色彩模式,常见的为RGB模式.CMYK模式.灰度模式.位图模式和索引模式. RGB模式 这是Photoshop最常用的颜色模式,也称之为真彩色颜色模式,在RGB模式 ...
- 自己搭建git服务器
1.安装git 2.创建git用户,给权限(git目录下) 3.设置公钥 4.初始化git仓库 5.给权限(仓库) 连接到本地
- 腾讯开源项目phxpaxos的编译步骤
#paxos的一般编译流程在项目文档<中文详细编译手册>里面已经有介绍,这里重点介绍一下编译samples目录下的代码: #我的环境是ubuntu; #设置paxos根目录 phx_dir ...
- 博客三--tensorflow的队列及线程基本操作
连接我的开源中国账号:https://my.oschina.net/u/3770644/blog/3036960查询
- LoadRunner录制脚本时没有响应——无法启动浏览器问题总结
1.ie浏览器去掉启用第三方浏览器扩展 2.loadrunner11 键盘F4,在browser Emulation点击change,在弹出的提示框中Browser version 选择8.0,pla ...