Angular 7 指令在 Android 電話上用於特殊字符點和減號的輸入類型“數字”的 keydown 事件不會阻止

Question

在 angular 7 指令中，keydown 事件不會阻止 android 設備中的鍵用於點和減號等特殊字符。 請幫助提供解決方案。 我用過下面的代碼

    import { Directive, OnInit, ElementRef, HostListener } from "@angular/core";
    
    @Directive({
            selector:'[numberOnly]'
    })
    export class AllowNumberDirective {
    
        regexStr = '^[0-9]+$'
        constructor(private el: ElementRef){        
            console.log("constructor triggered", el);
        }
    
        @HostListener('keydown', ['$event'])
        onKeyDown(event){        
            return new RegExp(this.regexStr).test(event.key);        
        }
     }
    
    

二手 HTML 標簽

 <input numberOnly style="width: 200px; height: 25px;" type="number" />

Answer 1

你的代碼工作得很好。

請看一下這個stackblitz：

https://stackblitz.com/edit/angular-ivy-tojuni?file=src%2Fapp%2Fnumbersonly.directive.ts

您需要做的就是在您使用該組件的模塊的聲明部分中添加指令。

Answer 2

嗨，對於僅限 android 的用戶，您可以使用以下內容：

這將僅對 android 用戶進行測試，在其他情況下，您可以使用操作系統的 rest 的常規代碼。

const opera = 'opera';
const userAgent = navigator.userAgent || navigator.vendor || window[opera];
if (/android/i.test(userAgent) && event.target && event.target.value) {
  const regexStr = '^[0-9]+$';
  return new RegExp(regexStr).test(event.key)
}