在角度材料 2 输入字段中仅允许数字、TAB、DELETE、BACKSPACE、左箭头、右箭头

Question

我正在尝试阻止字符和其他键盘输入，数字、Tab键、退格键、删除除外strong>、左箭头、右箭头

我刚刚尝试了以下代码，但这可以输入几个字符，

<input type="text" matInput required name="mobileNumber"  onkeypress='return ((event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 96 && event.charCode <= 105) || (event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39))'>

这是the working example

我怎样才能正确地阻止那些

Answer 1

以下是我的解决方案：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
    selector: '[myNumberOnly]'
})
export class NumberOnlyDirective {
    // Allow decimal numbers. The \. is only allowed once to occur
    private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

    // Allow key codes for special events. Reflect :
    // Backspace, tab, end, home
    private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];

    constructor(private el: ElementRef) {
    }

    @HostListener('keydown', [ '$event' ])
    onKeyDown(event: KeyboardEvent) {
        // Allow Backspace, tab, end, and home keys
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }

        // Do not use event.keycode this is deprecated.
        // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
        let current: string = this.el.nativeElement.value;
        // We need this because the current value on the DOM element
        // is not yet updated with the value from this event
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}

Answer 2

我很确定您想知道这里的问题是什么，因为您使用的字符代码是 HTML 字符代码，而且您肯定使用了正确的字符代码。这里的问题是您的 onkeypress 事件为您提供了字符的 ASCII 码，这就是您可以在输入字段中输入从 'a' 到 'i' 的原因。

我的建议是就这样离开它

onkeypress='return (event.charCode >= 48 && event.charCode <= 57)'

其他键（箭头、删除等）仍然有效。