javascript - tegn i felt

Jeg har gjort mye research på dette og kan fortsatt ikke finne en god løsning. I utgangspunktet har jeg dette feltet i skjemaet mitt som kun skal tillate tall. Likevel kan jeg skrive inn spesialtegn fra Mac i det feltet ved å gjøre:

Hold nede option + shift og trykk deretter på hvilken som helst tast på tastaturet (for eksempel: h j k l u i , osv).

Vennligst se vedlagt bilde.

Kan noen hjelpe meg med IKKE å tillate slike tegn i ID-feltet? Tusen takk på forhånd!

Her er koden min:

LIVE DEMO

ID: <input formControlName="userid" type="text" pKeyFilter="num" placeholder="Numbers" pInputText>

Svar #1

Det finnes mange tilnærminger til dette problemet. Alle de foreslåtte løsningene bør fungere. Min anbefaling er tilnærming 2.

Tilnærming 1

Du kan prøve å fjerne ikke-tall tegn på input-hendelsen slik:

<input 
    formControlName="userid"
    type="text"
    placeholder="Numbers"
    oninput="javascript: this.value = this.value.replace(new RegExp('[^0-9]', 'gm'), '')"
    pInputText
/>

Modifisert demo

Jeg testet dette i Firefox og Chrome på MacOS, og det ser ut til å fungere fint.

Tilnærming 2

For å gjøre dette fra Angular-modulen din:

Bruk et enkelt tekstfelt

<input
    formControlName="userid"
    type="text"
    placeholder="Number"
    pInputText
/>

Lytt til endringer og oppdater verdien deretter. Ikke glem å registrere observatørene dine ved init.

registerChangeObservers() {
    this.registrationFormGroup.get("userid").valueChanges.subscribe(val => {
      this.registrationFormGroup.patchValue({
        'userid': val.replace(new RegExp('[^0-9]', 'gm'), '')
      }, { emitEvent: false });
    });
  }

ngOnInit() {
    this.registerChangeObservers();
  }

Merk spesielt delen { emitEvent: false }. Du må sette dette for å unngå rekursjon. Denne tilnærmingen kan mislykkes hvis modellen din blir ugyldig, og derfor endres verdien til null. Dette kan for eksempel skje hvis du setter inndatatype til nummer, men en bruker klarer å skrive inn et ikke-numerisk tegn. For å unngå dette, sørg for at inndatavalideringen ikke feiler på spesialtegn, for eksempel ved å sette inndatatypen til tekst.

Demo her

Tilnærming 3

For å unngå visning av modifiserende tegn kan du også lytte til inputhendelser (dvs. tastetrykk) i stedet for faktiske verdiforandringer. Dette tilsvarer tilnærming 1. For å gjøre dette, bruk denne inputen

<input
    formControlName="userid"
    type="text"
    placeholder="Number" 
    pInputText
    (input)="onPress($event)"
/>

og legg til denne funksjonen i kontrolleren din

onPress($event) {
    this.registrationFormGroup.patchValue({
        'userid': $event.target.value.replace(new RegExp('[^0-9]', 'gm'), '')
      }, { emitEvent: false });
  }

Demo 3

Merk: Jeg ville generelt unngått denne tilnærmingen fordi undertrykkelsen av modifiserende tegn etter min erfaring kan ha utilsiktede bivirkninger med noen uvanlige inndata-metoder, spesielt på mobil. Tilnærmingen ovenfor (Tilnærming 2) fungerer også og er tryggere etter min mening. Selv om modifiserende tegn vises, vil de forsvinne ved neste brukerhandling og vil aldri være til stede i modellens data.

Svar #2

Du har allerede prøvd med:

<input type="number" pattern="[0-9]{10}" />

følgende validerer et 10-sifret nummer, og jeg synes også du bør gjøre en validering med JavaScript:

<input type="text" id="text" onblur="validaNumericos();" />

Funksjon Javascript:

function validaNumericos(){
 var inputtxt = document.getElementById('text'); 
 var valor = inputtxt.value;
 for(i=0;i<valor.length;i++){
     var code=valor.charCodeAt(i);
         if(code<=48 || code>=57){          
           inputtxt.value=""; 
           return;
         }    
   }
  
}
<input type="text" id="text" onblur="validaNumericos();" />

Relaterte artikler