柬埔寨网站建设运营维护,筋郑州做网站,做经营网站怎么赚钱,江苏昆山网站建设简介
当在 Angular 2 模板中绑定 keyup 或 keydown 事件时#xff0c;可以指定 键名。这将应用一个过滤器#xff0c;只有在按下特定键时才会触发事件。
在本文中#xff0c;您将学习如何在监听 keyup 和 keydown 事件时使用键名。
使用键名
首先#xff0c;让我们看一…简介
当在 Angular 2 模板中绑定 keyup 或 keydown 事件时可以指定 键名。这将应用一个过滤器只有在按下特定键时才会触发事件。
在本文中您将学习如何在监听 keyup 和 keydown 事件时使用键名。
使用键名
首先让我们看一个不使用键名的示例。
假设我们有一个 input 元素供用户提供信息。我们希望在用户按下 ENTER 键时记录到控制台
input (keydown)onKeydown($event)我们绑定了一个 keydown 事件处理程序触发 onKeydown()
接下来让我们编写 onKeydown() 函数来处理按下 ENTER 键
onKeydown(event) {if (event.key Enter) {console.log(event);}
}在每个 keydown 事件上执行检查以确定 event.key 的值是否为 Enter。如果为 true我们将 event 记录到控制台。
现在是相同的示例但添加了 ENTER 键名到事件中
input (keydown.enter)onKeydown($event)我们绑定了一个 keydown.enter 伪事件 处理程序触发 onKeydown()
接下来让我们重写 onKeydown() 函数
onKeydown(event) {console.log(event);
}通过依赖 Angular 的 keydown.enter 伪事件不再需要手动检查 event.key 的值是否为 Enter。
使用特殊修饰键和组合键
此功能适用于特殊和修饰键如 ENTER、ESC、SHIFT、ALT、TAB、BACKSPACE 和命令 (meta)
键名键名ENTERinput (keydown.enter)...ESCinput (keydown.esc)...ALTinput (keydown.alt)...TABinput (keydown.tab)...BACKSPACEinput (keydown.backspace)...CONTROLinput (keydown.control)...COMMANDinput (keydown.meta)...
但它也适用于字母、数字、箭头和功能键 (F1 到 F12)
键名键名Ainput (keydown.a)...9input (keydown.9)...ARROWUPinput (keydown.arrowup)...F4input (keydown.f4)...
以下是 Angular 能够过滤的键值的完整列表。
您还可以将键组合在一起只有在触发键组合时才触发事件。在下面的示例中只有同时按下 CONTROL 和 1 键时事件才会触发
input (keyup.control.1)onKeydown($event)以下是更多示例让您了解可能的情况
键名键名SHIFTESCinput (keydown.shift.esc)...SHIFTARROWDOWNinput (keydown.shift.arrowdown)...SHIFTCONTROLZinput (keydown.shift.control.z)...
结论
您已经学会了 Angular 2 模板如何支持使用 keyup 和 keydown 伪事件过滤键名。
这种方法的好处包括减少手动检查键值和处理修饰键和非修饰键组合的重复性。
