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

Question

I'm trying to block chars and other keyboard inputs, except Numbers , Tab Key , Backspace , Delete , Left Arrow , Right Arrow

I just tried following code, but this can type few characters,

<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))'>

this is the working example

How can I block those properly

Answer 1

Below is my solution:

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

I'm pretty sure you're wondering what's the issue here, since the char codes you're using are HTML Char Codes and you are definetly using the right ones. The problem here is that your onkeypress event gives you the ASCII code of the characters, that's why you can type from 'a' to 'i' in your input field.

What I will suggest is to just leave it like this

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

The other keys (arrows, delete, etc..) will still work.