Question

我正在尝试制作一个inputNumber指令来阻止输入（当值错误时不突出显示输入，但即使输入错误的值）：

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

这是我的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

这是一个指令我肯定会帮助你的情况，它不会让除数字以外的其他输入值，但它也允许CTRL + C，CTRL + V以及其他有用的输入键。

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

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

    constructor(private el: ElementRef) { }

    @Input() NumericInput: boolean;
    @Input() latestInputValue: number;

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

        if (this.NumericInput) {
            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="true" [latestInputValue]="someValue" [(ngModel)]="someValue" >

Answer 2

您的指令也可以倾听＆＃39;输入＆＃39;变化。

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

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

  private el: HTMLInputElement;

  constructor(private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
}
  @HostListener('input',['$event'])onchange(event:any){
    let value=this.el.value;
    let lastchar = value.substr(value.length - 1);
    let bool=lastchar.match(/[0-9]/);
    if (bool){ //if last character match a regExpr
        bool=parseInt(value)>=0 && parseInt(value)<100; //and the condition required
    }
    if (!bool){ //if it does not meet the conditions
        value=value.substr(0,value.length-1);
        this.el.value=value;
        //it's necesary dispatch the event 'input' manually
        let event = new Event('input', { bubbles: true });
        this.el.dispatchEvent(event);
    }
  }

Answer 3

我建议你使用剑道，这只是让你有一个最小的＆amp;最大的是它自己的组件。

<kendo-numerictextbox [value]="value" [min]="0" [max]="100">
</kendo-numerictextbox>

Angular 4输入[type =＆＃39; number＆＃39;]阻止输入min / max

3 个答案: