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

}

答案＃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/

答案＃2

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

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

在你的情況下，你應該如下編輯你的觸發函數，它將只在控制台上顯示特殊字符

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