键盘事件
键盘事件种类:
keydown keypress keyup
键盘事件定义:
1. keydown(按键按下时触发)
当按下键盘上的任意按键
2. keypress(与 keydown 类似, 主要用来捕获数字, 字母, 小键盘)
与 keydown 事件类似, 也是按下按键时触发.
3. keyup(按键抬起时触发)
在松开之前按下的按键时触发
事件触发顺序:
- window.onkeypress = function () {
- console.log("keypress!!!");
- }
- window.onkeydown = function () {
- console.log("keydown!!!");
- }
- window.onkeyup = function () {
- console.log("keyup!!!");
- }
当随机按下一个按键时, 会有以下顺序:
三种键盘事件的区别:
keydown 和 keyup 事件可以接受组合键, 而 keypress 只能接受单一键.
keypress 事件中, 当按下系统按键 (如: , , 功能键等) 不能触发, 而 keydown 和 keyup 事件可以触发.
(重点) keypress 事件中不能区分小键盘和主键盘的数字符号, 认为 keycode 值一致
(当分别按下小键盘的 1 和主键盘数字符号的 1, 它的 keycode 值相同)
而在 keydown 和 keyup 中是可以区分的:
(当分别按下小键盘的 1 和主键盘数字符号的 1, 它的 keycode 值不同)
如:
- document.querySelector("textarea").onkeydown = function (event) {
- var code = window.eventevent.keyCode:event.which;
- console.log("通过 keydown 事件得到的 keycode 值:"+code);
- }
- document.querySelector("textarea").onkeyup = function (event) {
- var code = window.eventevent.keyCode:event.which;
- console.log("通过 keyup 事件得到的 keycode 值:"+code);
- }
- document.querySelector("textarea").onkeypress = function (event) {
- var code = window.eventevent.keyCode:event.which;
- console.log("通过 keypress 事件得到的 keycode 值:"+code);
- }
可知:
keypress 事件只识别主键盘的按键, 小键盘的按键的 keycode 值对应于主键盘的数字符号的 keycode 值.
keydown 和 keyup 事件即能识别主键盘按键, 也能识别小键盘按键, 并且有唯一的 keycode 值.
(重点)keypress 事件获得的 keycode 值, 除了按下主键盘的数字字符的 keycode 值与 keydown,keyup 事件的相同外, 其余都不相同.
获取 keycode 值的兼容写法:
首先获取 event 对象(表示事件的状态)
event = event || window.event;// 获取到事件对象
获取 keycode 值(兼容写法)
var code = event.keyCode || event.which || event.charCode;
补充: fromCharCode()方法
String.fromCharCode()方法是一个 String 的静态方法.
接受一个或多个指定的 Unicode 值, 返回一个字符串
即: 根据对应的 Unicode 值, 以字符串形式输出对应的字符(不区分大小写).
例如: 根据 Unicode 值得到 "HELLO WORD"
将会得到:
document.write(String.fromCharCode(72,69,76,76,79,32,87,79,82,68));
<h2 "="">文本事件 textInput
在文本插入文本框之前触发 textInput 事件.
注意:
只有可编辑区域才能触发 textInput 事件(文本框等)
只有键入对文本框内容有变化的按键, 才会触发该事件(数字, 字符等)
绑定事件时, 只能通过 addEventListener()进行绑定, 其他方式无效
- textarea.addEventListener("textInput",function (event) {
- event = event || window.event;
- console.log(event);
- });
通过 event 对象的 data 属性, 来获取到所输入的字符
来源: https://www.2cto.com/kf/201804/736417.html