Angular2 - Eingabefeld, um nur Zahlen zu akzeptieren

Ich würde gern auf die Antwort von @omeralper , die meiner Meinung nach eine gute Grundlage für eine solide Lösung.

Was ich dir Vorschlage, ist eine vereinfachte und up-to-date-version mit der neuesten web-standards. Es ist wichtig zu beachten, dass event.keycode ist entnommen aus der web-standards und künftige browser-updates möglicherweise nicht mehr. Sehen https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Darüber hinaus die Methode

String.fromCharCode(e.keyCode);

nicht garantieren, dass Sie den keyCode über die Taste betätigt wird, indem der Benutzer die Karten zu den erwarteten Brief identifiziert, auf die Benutzer-Tastatur, da die verschiedenen Tastatur-Konfigurationen wird in einem bestimmten keycode unterschiedliche Charaktere. Mit diesem wird die Einführung bugs, die sind schwer zu identifizieren und können leicht brechen, die Funktionalität für bestimmte Benutzer. Vielmehr schlage ich die Verwendung der Veranstaltung.Schlüssel, siehe docs hier https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Darüber hinaus, wir wollen nur, dass die resultierende Ausgabe ist eine gültige dezimalen. Dies bedeutet, dass die zahlen 1, 11.2, 5000.2341234 sollte akzeptiert werden, aber den Wert 1.1.2 sollten nicht akzeptiert werden.

Beachten Sie, dass in meiner Lösung bin ich ohne Ausschneiden, kopieren und einfügen-Funktion, da es open windows auf Fehler, vor allem, wenn die Menschen fügen Sie unerwünschten text in den entsprechenden Feldern. Das wäre erforderlich, wenn ein cleanup-Prozess auf ein keyup-Prozedur; was nicht den Rahmen dieses thread.

Hier ist die Lösung, die ich Vorschlage.

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();
        }
    }
}

InformationsquelleAutor der Antwort JeanPaul A.

können Sie erreichen es wie folgt

<input type="text" pInputText (keypress)="onlyNumberKey($event)" maxlength="3"> 

onlyNumberKey(event) {
    return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57;
}

//for Decimal you can use this as

onlyDecimalNumberKey(event) {
    let charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31
        && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

hoffe, dies wird Ihnen helfen.

InformationsquelleAutor der Antwort Pardeep Jain

Um dies zu erreichen, habe ich gebunden, eine Funktion, um das onInput-Methode wie diese:

(input)="stripText(infoForm.get('uin'))

Hier ist das Beispiel in meinem Formular:

<form [formGroup]="infoForm" (submit)="next()" class="ui form">
    <input type="text" formControlName="uin" name="uin" id="uin" (input)="stripText(infoForm.get('uin'))" required/>
</form>

Dann habe ich der folgenden Funktion meine Komponente:

  stripText(control: FormControl) {
   control.setValue(control.value.replace(/[^0-9]/g, ''));
  }

Dieser regex /[^0-9]/g sucht für alles, was nicht eine Zahl ist, und mit .replace ich es ersetzt durch nichts. Also, wenn ein Benutzer versucht, geben Sie ein Zeichen, das keine Zahl ist (in diesem Fall ein Charakter, der nicht null bis neun), es scheint so, als wäre nichts passiert, in das Textfeld ein.

InformationsquelleAutor der Antwort Christopher

Einfach Erstellen Sie eine Richtlinie und fügen Sie unten hostlistener:

@HostListener('input', ['$event'])
    onInput(event: Event) {
        this.elementRef.nativeElement.value = (<HTMLInputElement>event.currentTarget).value.replace(/[^0-9]/g, '');
    }

Ersetzen Sie den ungültigen text mit leer. Alle Tasten und Tastenkombinationen funktioniert nun in allen Browsern bis IE9.

InformationsquelleAutor der Antwort Gaurav Joshi

Mit Unterstützung für die Desinfektion der eingefügte Inhalt:

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

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

    DIGITS_REGEXP =  new RegExp(/\D/g);
    constructor(private el: ElementRef) { 

        //Sanatize clipboard by removing any non-numeric input after pasting
        this.el.nativeElement.onpaste = (e:any) => {
            e.preventDefault();
            let text;
            let clp = (e.originalEvent || e).clipboardData;
            if (clp === undefined || clp === null) {
                text = (<any>window).clipboardData.getData('text') || '';
                if (text !== '') {
                    text = text.replace(this.DIGITS_REGEXP, '');
                    if (window.getSelection) {
                        let newNode = document.createElement('span');
                        newNode.innerHTML = text;
                        window.getSelection().getRangeAt(0).insertNode(newNode);
                    } else {
                        (<any>window).selection.createRange().pasteHTML(text);
                    }
                }
            } else {
                text = clp.getData('text/plain') || '';
                if (text !== '') {
                    text = text.replace(this.DIGITS_REGEXP, '');
                    document.execCommand('insertText', false, text);
                }
            }
        };
    }

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    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();
      }
    }

}

InformationsquelleAutor der Antwort mad_fox

vom @omeralper 's Antwort.
Ändere ich ein wenig, dass nicht akzeptieren Zeitraum ascii (keycode 110,190).
und verwenden lassen ch = (e.- Schlüssel); zu vergleichen mit dem regulären Ausdruck, wenn Sie die Sprache ändern (wie Thai oder Japanisch), die es nicht akzeptieren Charakter dieser Sprache

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      //console.log(event, this.OnlyNumber);
        if ([46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1) {
          return;
        }
      let ch = (e.key);
      let regEx =  new RegExp(this.regexStr);   
      if(regEx.test(ch))
        return;
      else
         e.preventDefault();
    }
  }
}

hoffe, dies hilft 🙂

InformationsquelleAutor der Antwort Supakorn Thongtra

fromCharCode gibt 'a' beim drücken auf die numpad - '1' also das methoid sollte vermieden werden

(admin: kann nicht kommentieren wie üblich)

InformationsquelleAutor der Antwort fdsfdsfdsfds

Habe ich einige Modifikationen in der oben genannten Richtlinie und umgesetzt, min, max, maxlength.

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

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

  private regex: RegExp = new RegExp(/[0-9]/g);
  //Allow key codes for special events. Reflect :
  private specialKeys: Array<number> = [46, 8, 9, 27, 13, 110, 190, 35, 36, 37, 39];
  //Backspace, tab, end, home

  @Input() maxlength: number;
  @Input() min: number;
  @Input() max: number;

  constructor(private el: ElementRef) {
  }
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
    e = <KeyboardEvent>event;

if ((
  (this.specialKeys.indexOf(event.which) > -1) ||
  //to allow backspace, enter, escape, arrows  
  (e.which == 65 && e.ctrlKey == true) ||
  //Allow: Ctrl+C        
  (e.which == 67 && e.ctrlKey == true) ||
  //Allow: Ctrl+X
  (e.which == 88 && e.ctrlKey == true))) {
  return;
} else if (//to allow numbers  
  (e.which >= 48 && e.which <= 57) ||
  //to allow numpad number  
  (event.which >= 96 && event.which <= 105)) { }
else {
      event.preventDefault();
    }
    let current: string = this.el.nativeElement.value;

    let next: string = current.concat(event.key);
    if ((next && !String(next).match(this.regex)) ||
      (this.maxlength && next.length > this.maxlength) ||
      (this.min && +next < this.min) ||
      (this.max && +next >= this.max)) {
      event.preventDefault();
    }

  }
}

InformationsquelleAutor der Antwort Karan Mistry

Use-Direktive zur Einschränkung der Benutzer, geben Sie nur zahlen in der folgenden Weise:

.directive('onlyNumber', function () {
    var regExp = /^[0-9]*$/;
    return {
        require: '?ngModel',
        restrict: 'A',
        priority: 1,
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$validators.onlyNumber= function (modalValue) {
                return ctrl.$isEmpty(modalValue) || regExp.test(modalValue);
            };
        }
    };
    })

In HTML:

<input id="txtRollNumber" type="text" name="rollNumber" placeholder="Enter roll number*" ng-model="rollNumber" class="form-control" maxlength="100" required only-number />

InformationsquelleAutor der Antwort Jayoti Parkash