Hvordan tvinge inngangsfeltet til å legge inn tall bare ved hjelp av JavaScript?

Å begrense brukeren til bare numeriske inngangsverdier er ekstremt viktig, spesielt når du tar data på et skjema. Det er mange eksempler der å begrense brukeren for å unngå feil innspill er viktig, for eksempel å ta brukerens telefonnummer eller kanskje spørre brukeren om hans alder.

I HTML kan inngangskoden settes til å bare ta numeriske innganger ved å sette dens type eiendom til Antall eller til Tlf. Å gjøre det gjennom JavaScript kommer imidlertid til å bli litt vanskelig.

Trinn 1: HTML -dokumentet

Opprett en HTML -fil, og sett opp et inngangsfelt i den filen og en tekst som ber brukeren om å legge inn data i tekstfeltet ved hjelp av følgende linjer:

Skriv inn tall her

I disse linjene:

• Input Tags Onkeypress -eiendom er satt til returverdien til Sjekk nummer() metode
• Onkeypress -eiendommen utføres på en bestemt hendelse som skjer, og denne hendelsen er tilfeldigvis en nøkkelpress, så pass hendelsen inne i Sjekk nummer() metode også.

Å kjøre HTML -websiden nå vil gi følgende resultat i nettleseren:

Foreløpig kan alle typer tegn skrives innenfor dette tekstfeltet:

Men dette vil endre seg i neste avsnitt.

Trinn 2: Sett opp JavaScript -kode

I JavaScript -filen eller i tag, start med å lage funksjonen som heter som Sjekk nummer():

funksjon checknumber (hendelse)
// De kommende linjene kommer inn her

Inne i denne funksjonen er det første å få ASCII -koden til tastetrykk ved å bruke "begivenhet" variabel:

var acode = event.hvilken ? begivenhet.Hvilket: arrangement.nøkkelkode;

Etter det, hvis ASCII -koden ikke er av nummer, kan du returnere falsk Til inngangsfeltet ellers, returner SANN:

if (acode> 31 && (acode < 48 || aCode > 57)) Return False;
return True;

Det komplette kodebiten vil være som:

funksjon checknumber (hendelse)
var acode = event.hvilken ? begivenhet.Hvilket: arrangement.nøkkelkode;
if (acode> 31 && (acode < 48 || aCode > 57)) Return False;
return True;

Med det er du ferdig med å sette opp JavaScript -delen.

Trinn 3: Testing av inngangsfeltet

Etter at du er ferdig med trinn 1 og trinn 2, utfør bare HTML -dokumentet og prøv å sette verdier inne i inngangsfeltet og observere dets oppførsel:

Det er nå bare å la tall skrives inni den og ignorerer annen karakter

Konklusjon

For å begrense brukeren til bare å legge inn numeriske tegn i en inngang ved hjelp av JavaScript. I så fall kan du ringe en funksjon på alle tastene som er trykket inn i det inngangsfeltet, og innen denne funksjonen kan du sammenligne ASCII -koden til nøkkelen som er presset mot ASCII -kodene til numeriske verdier. Basert på denne sammenligningen, la nøklene legges inn inne i inngangsfeltet.