如何仅针对 Angular7 中的字母数字和特殊字符触发 keydown 事件？

Question

我有一个 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");
  }

}

Answer 1

以下是限制 keydown 事件的两种方法 -

1. 您只允许按字母数字键

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;
    }

2. 您可以限制特定键

sendTypingEvent(event){
        if ((event.keyCode >= 112 && event.keyCode <= 123) || event.keyCode == 16){
            console.log("Disabled f11 to f12, shift keys");
            return false
        }
}

获取该网站的密钥代码 -

https://keycode.info/

Answer 2

\r\n

\r\n

document.getElementById("myinput").addEventListener("input", function(event) {\r\n  if (/[!\'^+%&/()=?_\\-~`;#$\xc2\xbd{[\\]}\\\\|<>@,]/gi.test(event.data)) {\r\n    console.log(event.data) // or\r\n    // your operation\r\n  }\r\n})

\r\n

<input id="myinput" type="text" style="width: 70%;">

\r\n

\r\n

\r\n

\n\n

在您的情况下，您应该如下编辑触发函数，它将仅在控制台上显示特殊字符

\n\n

sendTypingEvent(event) {\n  if (/[!\'^+%&/()=?_\\-~`;#$\xc2\xbd{[\\]}\\\\|<>@,]/gi.test(event.key)) {\n    console.log(event.key);\n  }\n}\n

\n