第58节 KeyboardEvent键盘事件和TextEvent文本事件-王唯

本内容是用于Web前端开发的Javascript视频的课件，请通过Master Brother JavaScript视频课程学习。

DOM2级事件最初指定键盘事件，但在完成之前删除了相应的内容;

键盘事件类：

描述用户与键盘的交互，提供关键的详细信息，并将其从 UIEvent 类继承;

它使用三个键盘事件来识别不同类型的键盘活动：

按键：按下键盘上的任何一个键时触发，如果按住它，它将被反复触发;

按键：按下键盘上的字符键时触发，如果按住，则反复触发;

小键盘：释放键盘上的键时触发;

按键和按键是低级键盘事件，无论按下或释放任何键，都会触发它们。

尽管所有元素都支持上述3个事件，但它们最常用于通过文本框输入文本时;

当用户按下键盘上的字符键时，触发事件的顺序为：按键 - >按键 - >键;

如果用户按一个字符键不放，会反复触发按键和按键事件，直接由用户释放键，直到;

如果按下非字符键，触发事件的顺序为：按键 - >键;

键盘事件也支持辅助键，其事件对象中还有shiftKey、ctrlKey、altKey和metaKey属性，IE不支持metaKey;

事件对象属性：

键码键码属性：键盘上的键将对应于一个Unicode值，这个值是keyCode键码;

对于按键和按键事件，所有按键在按下时都可以触发，因此它们都关心键，其对象的keyCode返回键码，对应于键盘上特定的物理键;

钥匙 键代码

退格 8

选项卡 9

输入 13

班次 16

控制 （Ctrl）17

备选方案18

暂停/中断 19

瓶盖锁 20

退出 （Esc）27

空间 32

上一页 33

向下翻页 34

结束（结束）35

首页 36

向左箭头 37

向上箭头 38

向右箭头 39

向下箭头 40

插入（英寸）45

删除 （Del）46

字母键 （A-Z） 65-90

左视窗键 91

右视窗键 92

上下文菜单键 93

数字键盘 0-996-105

数字键盘 s.107

数字小键盘 - 和大键盘 -109

数字键盘.110

数字键盘/111

F1-F12112-123

数字锁 144

滚动锁 145

分号 FF 为 59，其他为 186

等于 （-） 187

小于（或逗号）188

减号 （-） 189

大于（或句号）190

正斜杠 191

水槽注释 （'） 192

等于 61

左括号 219

反斜杠 220

右括号 221

单行报价 222

Fn255

注意：在Firefox和低版本Opera中，分号键的值为59，即ASCII中分号的编码;

对于按键事件，只按可打印字符键触发，此时，keyCode返回与Unicode字符码对应的字符，这与键码不同;

键代码

0-948-57

A-Z65-90

a-z97-122

空间 32

波浪形 126

感叹号 33

@64

#35

$35

%37

&38

(40

)41

+43

* 42

^93

_95

左括号 91

反斜杠 92

右括号 93

左大括号 123

垂直 124

右大括号 125

单行报价 39

双引号 34

科隆 58

分号 59

逗号 44

期间 46

斜箱 47

小于数字 60

大于数字 62

问号 63

返回 13

例：

示例：屏蔽组合键，例如：

字符编码 charCode 属性：此属性返回触发按键事件时按下的字符键的字符 Unicode 值，在其他事件中返回 0;

在keypress事件中，keyCode属性返回一个值（也是字符编码，所以它）与charCode一致;

IE8 和以下及更低版本的操作器不支持 charCode 属性，这些属性保存在键按事件对象发生的 keyCode 中;

此外，一些较低版本的浏览器在生成非打印字符时也会触发按键事件，但此时它们的charCode值为0，这允许您检测其charCode属性值为0的情况;

特别要注意的是，通过中文输入法输入的字符不会触发按键事件，但会触发按键和键控事件，但是，事件对象的charCode为0，keyCode始终返回229;

跨浏览器获取字符编码，并将其添加到 eventutil .js 文件中：

应用：

属性：在按下键时返回 charCode 代码，该代码可能发生在按键、按键和按键事件中;

在按键事件中，其行为和值与charCode一致，在键控和键控事件中可以返回UniCode代码的所有键;

IE8 及更早版本不支持 where 属性，不支持它的浏览器可以使用 keyCode 属性;

在 DOM3 事件标准中，此属性已被删除，但所有浏览器都支持;

键属性：DOM3级事件对键盘事件进行一些更改，删除键码，charCode和耳语属性，并添加新属性：键，用于获取键名;

添加key属性是为了替换keyCode，其值是相应的文本字符（如"a"或"A"），这是键名，当按下非字符键时，键值是相应键的名称（如"Shift"或"Down"）;

示例：验证仅接受数字的电话号码，加上 、（） 、-、 ArrowLeft、ArrowRight、Delete 或 Backspace，例如：

示例：使用击键移动元素：

所有浏览器都支持键属性，IE还支持类似于key的char属性，但只有字符键返回值;

Safari 和 Chrome 还为事件对象定义了类似键的 keyFuler 属性，为功能键返回"Shift"、"Enter"等，对于可打印字符，返回该字符的 Unicode 编码，例如 A 键，值为 "U-0041";

代码属性：表示触发事件的物理键;

密钥<字母>，如KeyA，KeyB等><;

在不同的系统上，相应的物理按钮键值会有所不同，例如在窗口的情况下：

键代码值

ESCEscape

数字 0-9数字0-数字9

减去"减号"

平等"平等"

退格"退格"

选项卡"选项卡"

A-ZKeyA-Keyz

Bracket"BracketLeft"/"BracketRight"

输入"输入"

Control"ControlLeft"/"ControlRight"

分号"分号"

报价"报价"

反向引用"反向引用"

Shift"ShiftLeft"/"ShiftRight"

反斜杠"反斜杠"

逗号"逗号"

期间"期间"

斜杠"斜杠"

Alt"AltLeft"/"AltRight"

空间"空间"

CapsLock"CapsLock"

F1-F12"F1"-"F12"

暂停"暂停"

滚动锁"滚动锁"

打印屏幕"打印屏幕"

数字小键盘0-9"数字小键盘0"-"数字小键盘9"

数字小分法"数字小乘法"（减法）

NumpadAdd "NumpadAdd" （添加）

NumpadDecimal"NumpadDecimal"

NumpadMultiply"NumpadMultiply"

Int 反斜杠 "IntlBackslash" （反斜杠，除法）

NumpadEqual "NumpadEqual" （等于）

NumLock"NumLock"

家 "家"

结束"结束"

ArrowUp"ArrowUp"

ArrowLeft"ArrowLeft"

箭权"箭权"

ArrowDown "ArrowDown"

PageUp"PageUp"

下一页"下一页"

插入"插入"

删除"删除"

Meta"MetaLeft"/ "MetaRight

ContextMenu"ContextMenu"

权力"权力"

浏览器搜索"浏览器搜索"

BrowserFavorites "BrowserFavorites"

浏览器刷新"浏览器刷新"

浏览器停止 "浏览器停止"

BrowserForward "BrowserForward"

BrowserBack "BrowserBack"

启动应用程序1启动应用程序1"

LaunchMail "LaunchMail"

此外，对于输入法输入，键属性不被识别，它将返回"Process"，并返回代码属性或其物理键码;

键值在不同的语言中是不同的，但代码是相同的;

示例：使用键盘控制元素：结构和样式：

Repeat 属性：是返回布尔值的只读属性，如果键一直按住，则返回 true

辅助键：键盘事件对象还支持辅助键，具有 altKey、ctrlKey、shiftKey 和 metaKey 属性（与鼠标事件的辅助键一样）：

GetModifierState（） 方法：

DOM3级别还将getModifierState（）方法添加到对象中，该对象接收一个参数，该参数等于Shift，Control，AltGraph或Meta的字符串，指示要检测的辅助键，如果指定的辅助键处于活动状态，则该方法返回true或返回false;

类似的属性可以通过事件对象的shiftKey，altKey，ctrlKey和metaKey属性获得;

位置属性：DoM3 级事件添加一个名为 location 的属性，返回一个指示按键位置的长常量值：DOM_KEY_LOCATION_STANDARD值 0 表示默认键盘，DOM_KEY_LOCATION_LEFT值 1 表示左侧位置（如左侧的 Alt 键），DOM_KEY_LOCATION_ RIGHT 值 2 表示右位置（例如，右侧的 Shift 键）， DOM_KEY_LOCATION_NUMPAD数字小键盘的值为 3，移动设备小键盘的值为 DOM_KEY_LOCATION_MOBILE 4，DOM_KEY_LOCATION_JOYSTICK手柄（例如控制器）的值为 5 ;(其中 4 和 5 被丢弃）

位置属性可用于按键和键控事件，但不能用于按键事件;IE8 和其他较低版本的浏览器不支持 logation 属性;而较低版本的Chrome还支持keyLocation等效属性，但该值除了按数字小键盘返回3外还返回0，现在已丢弃;

示例：键盘快捷键的键盘映射类：说明：将 PageUp、Alt_Z 和 ctrl-alt-shift-F5 等键标识符映射到 Javascript 函数，这些函数称为对击键的响应;unbing（） 方法添加和删除绑定，使用 install（） 方法在 HTML 元素（通常是文档对象）上配置 Keymap，通过在元素上注册按键事件处理程序来配置 Keymap，并且每次按下键时，处理程序都会检查与键相关的函数，如果是，则调用它 如果可以在键控事件处理程序中使用 DOM3 事件的 key 属性， 如果没有，请查找 Webkit 的 keyJeller 属性，然后使用它，否则，使用 keyCode 属性;将其另存为键盘映射.js;

文本事件：

在可编辑区域中输入字符时，将触发只有一个文本输入的文本类事件;

但只有IE支持它，而不是所有其他浏览器，但是有一个非标准的文本输入事件，注意到输入的第一个字母是大写的;

但除了Webkit浏览器支持外，IE和Firefox不支持textInput事件;

此事件补充了按键，目的是在向用户显示文本之前拦截文本，即在文本插入文本框之前触发文本输入事件;

但也有一些区别：

任何可以获得焦点的元素都可以触发按键事件，但只有可编辑的元素才能触发文本输入事件;

仅当用户按下可以输入实际字符的键时，才会触发文本输入事件，而当按下影响文本显示的键（例如，退格键）时，才会触发按键事件;

文本输入事件对象还包含一个数据属性，其值是输入的字符;

此外，文本输入在键控之前触发，然后按键，如果在按键事件中被阻止默认行为，则可能不会触发文本输入事件，例如：

文本输入事件不是键盘特定的事件，无论是通过键盘、剪切和粘贴、拖放等，每当文本输入发生时，都会被触发;

事件对象的 inputMethod 属性是一组常量值，表示如何输入文本（即所谓的输入源），例如：0 表示浏览器不确定如何输入，1 表示使用键盘输入输入，2 表示粘贴，3 表示拖动， 4 表示使用 IME 输入，5 表示通过选择表单中的输入输入来输入，6 表示手动输入，7 表示通过语音输入。8表示输入是通过几种方法组合进行的，9表示是通过脚本输入的;

此属性允许您确定如何将文本输入到控件中，但只有 IE 支持 inputMethod 属性;

对于键盘输入，数据属性通常只包含一个字符，但其他输入源通常可能包含多个字符。对于按键事件，按键事件表示输入的单个字符，使用keyCode或charCoode属性保存，返回相应的Unicode编码，因此需要转换String.fromCharCode（）方法，例如：

可以通过取消文本输入、文本输入和按键事件来阻止字符输入，这意味着您可以使用这些事件来筛选输入，例如筛选用户输入并将其另存为 InputFilter .js

输入事件事件：

InputEvent 类用于构造与字符输入相关的事件对象;

输入事件：

此外，可编辑元素还可以添加输入事件;

在新输入的文本实际插入到可编辑区域元素之前触发按键和文本输入事件，因此可以取消事件或在事件处理程序中阻止文本插入，而插入文本后触发事件的输入事件无法取消，并且无法在其事件对象中指定最新文本;

与文本事件一样，该事件具有数据和 isComposing 属性;

数据属性：只读，返回当前输入的字符串，如果是删除操作，则值为空字符串;

IsComposing 属性：只读，返回一个布尔值，指示该事件是在 compositionstart 事件之后和触发 composend 事件之前触发的，即当前输入的字符由输入法输入;

如果更改未插入的文本，例如删除字符时，它可能是空字符串;

InputType 属性：表示当前正在编辑的文本类型，如果插入文本，则值为 insertText，如果是 Delete 删除字符，如果是 DeleContentForward，如果是退格删除字符，如果是删除字符，如果剪切文本，则值为 deleteCut，如果是返回换行符， 该值为insertLineBreak，如果它是粘贴的输入，则该值为insertFromPaste，如果将其拖入，则该值为insertFromDrop;

虽然IE支持输入事件，但它将其视为正常的事件类型，因此它没有数据并且是压缩属性;

IE8及以下版本不支持此事件，它提供了专用的产品更改事件，可用于检测文本输入元素的值属性的变化;

例如：跨平台：

beforeinput事件：beforeinput> <input触发，<选择>或<textarea >的值即将被修改，并且该事件也可以在设置为true的元素上触发，并且在designMode打开后的任何元素上触发该事件;

事件可以取消，如果取消，则不触发输入事件;

更改事件：当用户更改元素的值< >，<选择>，<文本区域>并提交更改时，将触发更改事件;

活动不可取消;