键盘:keydown 和 keyup

您所在的位置:网站首页 键盘上g是什么 键盘:keydown 和 keyup

键盘:keydown 和 keyup

2024-07-11 22:07| 来源: 网络整理| 查看: 265

在我们开始学习键盘的相关内容之前,请注意,在现代设备上,还有其他“输入内容”的方法。例如,人们使用语音识别(尤其是在移动端设备上)或用鼠标复制/粘贴。

因此,如果我们想要跟踪 字段中的所有输入,那么键盘事件是不够的。无论如何,还需要一个名为 input 的事件来跟踪 字段中的更改。对于这样的任务来说,这可能是一个更好的选择。稍后我们将在 事件:change,input,cut,copy,paste 一章中介绍它们。

当我们想要处理键盘行为时,应该使用键盘事件(虚拟键盘也算)。例如,对方向键 Up 和 Down 或热键(包括按键的组合)作出反应。

测试台

为了更好地理解键盘事件,你可以使用下面这个测试台。

在文本区域中尝试使用不同的组合键。

结果script.jsstyle.cssindex.htmlkinput.onkeydown = kinput.onkeyup = kinput.onkeypress = handle; let lastTime = Date.now(); function handle(e) { if (form.elements[e.type + 'Ignore'].checked) return; area.scrollTop = 1e6; let text = e.type + ' key=' + e.key + ' code=' + e.code + (e.shiftKey ? ' shiftKey' : '') + (e.ctrlKey ? ' ctrlKey' : '') + (e.altKey ? ' altKey' : '') + (e.metaKey ? ' metaKey' : '') + (e.repeat ? ' (repeat)' : '') + "\n"; if (area.value && Date.now() - lastTime > 250) { area.value += new Array(81).join('-') + '\n'; } lastTime = Date.now(); area.value += text; if (form.elements[e.type + 'Stop'].checked) { e.preventDefault(); } }#kinput { font-size: 150%; box-sizing: border-box; width: 95%; } #area { width: 95%; box-sizing: border-box; height: 250px; border: 1px solid black; display: block; } form label { display: inline; white-space: nowrap; } Prevent default for: keydown;;; keyup

Ignore: keydown;;; keyup

Focus on the input field and press a key.

Keydown 和 keyup

当一个按键被按下时,会触发 keydown 事件,而当按键被释放时,会触发 keyup 事件。

event.code 和 event.key

事件对象的 key 属性允许获取字符,而事件对象的 code 属性则允许获取“物理按键代码”。

例如,同一个按键 Z,可以与或不与 Shift 一起按下。我们会得到两个不同的字符:小写的 z 和大写的 Z。

event.key 正是这个字符,并且它将是不同的。但是,event.code 是相同的:

Key event.key event.code Z z(小写) KeyZ Shift+Z Z(大写) KeyZ

如果用户使用不同的语言,那么切换到另一种语言将产生完全不同的字符,而不是 "Z"。它将成为 event.key 的值,而 event.code 则始终都是一样的:"KeyZ"。

“KeyZ” 和其他按键代码

每个按键的代码都取决于该按键在键盘上的位置。UI 事件代码规范 中描述了按键代码。

例如:

字符键的代码为 "Key":"KeyA","KeyB" 等。 数字键的代码为:"Digit":"Digit0","Digit1" 等。 特殊按键的代码为按键的名字:"Enter","Backspace","Tab" 等。

有几种广泛应用的键盘布局,该规范给出了每种布局的按键代码。

有关更多按键代码,请参见 规范的字母数字部分,或者只需在上面的 测试台 中按下一个按键。

大小写敏感:"KeyZ",不是 "keyZ"

这是显而易见的,但人们仍会搞错。

请规避错误类型:它是 KeyZ,而不是 keyZ。像 event.code=="keyZ" 这样的检查不起作用:"Key" 的首字母必须大写。

如果按键没有给出任何字符呢?例如,Shift 或 F1 或其他。对于这些按键,它们的 event.key 与 event.code 大致相同:

Key event.key event.code F1 F1 F1 Backspace Backspace Backspace Shift Shift ShiftRight 或 ShiftLeft

请注意,event.code 准确地标明了哪个键被按下了。例如,大多数键盘有两个 Shift 键,一个在左边,一个在右边。event.code 会准确地告诉我们按下了哪个键,而 event.key 对按键的“含义”负责:它是什么(一个 “Shift”)。

假设,我们要处理一个热键:Ctrl+Z(或 Mac 上的 Cmd+Z)。大多数文本编辑器将“撤销”行为挂在其上。我们可以在 keydown 上设置一个监听器,并检查哪个键被按下了。

这里有个难题:在这样的监听器中,我们应该检查 event.key 的值还是 event.code 的值?

一方面,event.key 的值是一个字符,它随语言而改变。如果访问者在 OS 中使用多种语言,并在它们之间进行切换,那么相同的按键将给出不同的字符。因此检查 event.code 会更好,因为它总是相同的。

像这样:

document.addEventListener('keydown', function(event) { if (event.code == 'KeyZ' && (event.ctrlKey || eventaKey)) { alert('Undo!') } });

另一方面,event.code 有一个问题。对于不同的键盘布局,相同的按键可能会具有不同的字符。

例如,下面是美式布局(“QWERTY”)和德式布局(“QWERTZ”)—— 来自 Wikipedia:

对于同一个按键,美式布局为 “Z”,而德式布局为 “Y”(字母被替换了)。

从字面上看,对于使用德式布局键盘的人来说,但他们按下 Y 时,event.code 将等于 KeyZ。

如果我们在代码中检查 event.code == 'KeyZ',那么对于使用德式布局键盘的人来说,当他们按下 Y 时,这个测试就通过了。

听起来确实很怪,但事实确实如此。规范 中明确提到了这种行为。

因此,event.code 可能由于意外的键盘布局而与错误的字符进行了匹配。不同键盘布局中的相同字母可能会映射到不同的物理键,从而导致了它们有不同的代码。幸运的是,这种情况只发生在几个代码上,例如 keyA,keyQ,keyZ(我们已经看到了),而对于诸如 Shift 这样的特殊按键没有发生这种情况。你可以在 规范 中找到该列表。

为了可靠地跟踪与受键盘布局影响的字符,使用 event.key 可能是一个更好的方式。

另一方面,event.code 的好处是,绑定到物理键位置的 event.code 会始终保持不变。因此,即使在切换了语言的情况下,依赖于它的热键也能正常工作。

我们想要处理与布局有关的按键?那么 event.key 是我们必选的方式。

或者我们希望一个热键即使在切换了语言后,仍能正常使用?那么 event.code 可能会更好。

自动重复

如果按下一个键足够长的时间,它就会开始“自动重复”:keydown 会被一次又一次地触发,然后当按键被释放时,我们最终会得到 keyup。因此,有很多 keydown 却只有一个 keyup 是很正常的。

对于由自动重复触发的事件,event 对象的 event.repeat 属性被设置为 true。

默认行为

默认行为各不相同,因为键盘可能会触发很多可能的东西。

例如:

出现在屏幕上的一个字符(最明显的结果)。 一个字符被删除(Delete 键)。 滚动页面(PageDown 键)。 浏览器打开“保存页面”对话框(Ctrl+S) ……等。

阻止对 keydown 的默认行为可以取消大多数的行为,但基于 OS 的特殊按键除外。例如,在 Windows 中,Alt+F4 会关闭当前浏览器窗口。并且无法通过在 JavaScript 中阻止默认行为来阻止它。

例如,下面的这个 期望输入的内容为一个电话号码,因此它不会接受除数字,+,() 和 - 以外的按键:

function checkPhoneKey(key) { return (key >= '0' && key = '0' && key


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3