javascript - 如何仅针对Angular7中的字母数字和特殊字符触发keydown事件?
问题描述
我有一个 keydown 事件,我希望在按下字母数字或特殊字符(如 #$@)时触发它。
<input type="text" style="width: 70%;" [(ngModel)]= "textMessage" (keydown) ="sendTypingEvent()" >
我想限制事件根本不被触发,例如 enter、escape (esc)、shift、alt、tab、backspace 和 command (meta)、箭头和 f 键(f1 到 f12)。
有没有办法在 HTML 中设置 REGEX 模式?
<input (keydown.a)="..."> --expect to trigger
我可以触发事件并在函数调用中过滤键,如下所示。但是,尝试查看是否还有其他选择。
sendTypingEvent(event) {
if (event.key === "Enter" || event.key ==='esc' .... ) {
console.log("skip this event");
}
}
解决方案
以下是限制 keydown 事件的两种方法 -
- 您只允许按字母数字键
sendTypingEvent(event){
if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 65 && event.keyCode <= 90)){
console.log("input was 0-9");
console.log("input was a-z");
return true;
}
return false;
}
- 您可以限制特定键
sendTypingEvent(event){
if ((event.keyCode >= 112 && event.keyCode <= 123) || event.keyCode == 16){
console.log("Disabled f11 to f12, shift keys");
return false
}
}
获取此网站的密钥代码 -
推荐阅读
- xml-rpc - XML-RPC调用使用sortbyAge,如何创建一个数组?
- c# - 将表格复制到 WPF RichTextBox 中丢失边框
- pipe - 后台进程,使用 stdin 管道连接到父 shell 脚本中的 fd 3
- vue.js - 如何将 Vuetify 用于 Keycloak 登录主题
- javascript - FullCalendar v5 自定义多日事件的字体和背景颜色
- c++ - 什么时候在 C/C++ 中分配静态内存?在编译时还是在程序运行的最开始?
- r - 从另一个数据集中填充多列缺失数据
- api - 使用 github api 上的 web 服务等请求获取包的最新发布版本
- java - Webrtc:onIceConnectionChange和onConnectionChange有什么区别
- python - 使用深度学习改进多标签文本分类问题的结果