事件:事件类型-键盘事件KeyboardEvent和输入事件InputEvent
一 定义:用户操作键盘时触发的,是基于原始的 DOM0 实现的
二 事件
事件 | 定义 |
keydown | 用户按下键盘上某个键时触发,而且持续按住会重复触发 |
keypress |
用户按下键盘上某个键并产生字符时触发,而且持续按住会重复触发。Esc 键也会 触发这个事件。 DOM3 Events 废弃了 keypress 事件,而推荐 textInput 事件 |
keyup | 用户释放键盘上某个键时触发 |
- 场景
- 场景一:输入事件只有一个,即 textInput
- 定义:这个事件是对 keypress 事件的扩展,用于在文本显示给用户之前更方便地截获文本输入。
- 触发流程:textInput 会在文本被插入到文本框之前触发。
- 场景二:当用户按下键盘上的某个字符键时
- 触发流程:
- 首先会触发 keydown 事件
- 然后触发 keypress 事件
- 最后 触发 keyup 事件
- 注意,这里 keydown 和 keypress 事件会在文本框出现变化之前触发,而 keyup 事件会在文本框出现变化之后触发。
- 触发流程:
- 场景三:重复触发按键
- 如果一个字符键被按住不放,keydown 和 keypress 就会重复触发,直到这个键被释放
- 如果按住某个非字符键不放,则会重复触发 keydown 事件,直到这个键被释放,此时会触发 keyup 事件
- 场景一:输入事件只有一个,即 textInput
三 键码:keyCode
对于字母和数字键,keyCode 的值与小写字母和数字的 ASCII 编码一致
代码实现:
-
let textbox = document.getElementById("myText");
-
textbox.addEventListener("keyup", (event) => {
-
console.log(event.keyCode);
-
});
四 字符编码
浏览器在 event 对象上支持 charCode 属性,只有发生 keypress 事件时这个属性才会被设置值,包含的是按键字符对应的 ASCII 编码。通常,charCode 属性的值是 0,在 keypress 事件发生时则是 对应按键的键码。IE8 及更早版本和 Opera 使用 keyCode 传达字符的 ASCII 编码
-
// 要以跨浏览器方式获取字符编码,首先要检查 charCode 属性是否有值,如果没有再使用 keyCode,如下所示:
-
var EventUtil = {
-
// 其他代码
-
getCharCode: function(event) {
-
if (typeof event.charCode == "number") {
-
return event.charCode;
-
} else {
-
return event.keyCode;
-
}
-
},
-
// 其他代码
-
};
-
-
// 这个方法检测 charCode 属性是否为数值(在不支持的浏览器中是 undefined)。如果是数值,则返回。否则,返回 keyCode 值。可以像下面这样使用:
-
let textbox = document.getElementById("myText");
-
textbox.addEventListener("keypress", (event) => {
-
console.log(EventUtil.getCharCode(event));
-
});
-
// 一旦有了字母编码,就可以使用 String.fromCharCode()方法将其转换为实际的字符了
五 DOM3的变化
DOM3 Events 规范并未规定 charCode 属性,而是定义了 key 和 char 两个新属性
IE 支持 key 属性但不支持 char 属性。Safari 和 Chrome 支持 keyIdentifier 属性
key:key 属性用于替代 keyCode,且包含字符串
- 在按下字符键时,key 的值等于文本字符(如 “k”或“M”)
- 在按下非字符键时,key 的值是键名(如“Shift”或“ArrowDown”
char:char 属性在按下字符键时与 key 类似,在按下非字符键时为 null
-
// 对于字符键,keyIdentifier 返回以“U 0000”形式表示Unicode 值的字符串形式的字符编码。
-
let textbox = document.getElementById("myText");
-
textbox.addEventListener("keypress", (event) => {
-
let identifier = event.key || event.keyIdentifier;
-
if (identifier) {
-
console.log(identifier);
-
}
-
});
DOM3 Events 也支持一个名为 location 的属性:该属性是一个数值,表示是在哪里按的键
Safari 和 Chrome 支持一个等价的 keyLocation 属性
- 0 是默认键
- 1 是左边(如左边的 Alt 键)
- 2 是右边(如右边的 Shift 键)
- 3 是数字键盘
- 4 是 移动设备(即虚拟键盘)
- 5 是游戏手柄(如任天堂 Wii 控制器)
-
// 这个属性值始终为 0,除非是数字键盘(此时值为 3),值永远不会是 1、2、4、5。
-
let textbox = document.getElementById("myText");
-
textbox.addEventListener("keypress", (event) => {
-
let loc = event.location || event.keyLocation;
-
if (loc) {
-
console.log(loc);
-
}
-
});
getModifierState()方法:这个方法接收一个参数,一个等于 Shift、Control、Alt、AltGraph 或 Meta 的字符串,表示要检测的修饰键。如果给定的修饰键处于激活状态(键被按住),则方法返回 true,否则返回 false
-
let textbox = document.getElementById("myText");
-
textbox.addEventListener("keypress", (event) => {
-
if (event.getModifierState) {
-
console.log(event.getModifierState("Shift"));
-
}
-
});
六 textInput 事件
DOM3 Events 规范增加了一个名为 textInput 的事件,其在字符被输入到可编辑区域时触发
-
let textbox = document.getElementById("myText");
-
textbox.addEventListener("textInput", (event) => {
-
console.log(event.data);
-
});
event 对象上还有一个名为 inputMethod 的属性,该属性表示向控件中输入文本的手段。
使用这些属性,可以确定用户是如何将文本输入到控件中的,从而可以辅助验证
可能的 值如下:
- 0,表示浏览器不能确定是什么输入手段;
- 1,表示键盘;
- 2,表示粘贴;
- 3,表示拖放操作;
- 4,表示 IME;
- 5,表示表单选项;
- 6,表示手写(如使用手写笔);
- 7,表示语音;
- 8,表示组合方式;
- 9,表示脚本。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhieghfi
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22