javascript - Angular 4 input[type ='number'] 防止打字超过最小值/最大值

Question

我正在尝试制作一个 inputNumber 指令，它将阻止输入(当值错误时不突出显示输入，但即使是输入错误值):

a) 字母和符号，仅限于[0-9]b) 遵守 min 和 max 参数c) 通过 greaterOrEqual/lessOrEqual 属性与 View 中的其他此类指令相关。

这是我的input-number.directive.ts:

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

@Directive({
    selector: '[inputNumber]'
})
export class InputNumberDirective {

    @Input() min: number = 0; // will be input
    @Input() max: number = 100; // will be input

    @Input() greaterOrEqual: number = 23; // will be input
    @Input() lessOrEqual: number = 77; // will be input

    @HostListener('keypress', ['$event']) sanitizeValue(event: KeyboardEvent): boolean {

        const targetVal: number = Number((<HTMLInputElement>event.target).value);

        if (event.charCode >= 48 && event.charCode < 58) {
            if (this.min !== null && targetVal < this.min) {
                return false;
            }
            if (this.max !== null && targetVal > this.max) {
                return false;
            }
            if (this.greaterOrEqual !== null && targetVal < this.greaterOrEqual) {
                return false;
            }
            return !(this.lessOrEqual !== null && targetVal > this.lessOrEqual);
        }
        return false;
    }
}

这一切都可以防止输入字母/符号，但是当涉及到数字限制时，用户仍然可以输入它们，我的目的是防止这种情况发生。我在这上面找到了一些 SO 线程(例如 Don't allow typing numbers between max and min value)，但它对我帮助不大。

Answer 1

这是一个指令 ( Stackblitz ) 我相信会对你的情况有所帮助，它不允许输入数字以外的其他值，但它也允许 CTRL+C、CTRL+V 以及其他有用的输入键。

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

@Directive({
  selector: '[NumericInput]'
})
export class NumericInput {

    constructor(private el: ElementRef) { }

    @Input() latestInputValue: number;

    @HostListener('keydown', ['$event']) onKeyDown(event) {
        let e = <KeyboardEvent> event;

            if (this.latestInputValue < 0 || this.latestInputValue > 100) {
              e.preventDefault();
            } else if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+C
            (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+V
            (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+X
            (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
              // let it happen, don't do anything
              return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
        }
}

HTML

<input NumericInput [latestInputValue]="someValue" [(ngModel)]="someValue" >