Naravno, počnimo sa pisanjem članka.
JavaScript , dinamičan i svestran programski jezik, ključan je za omogućavanje interaktivnosti na webu. Sastavni je dio ekosistema web razvoja. Među mnogim problemima koje JavaScript pomaže riješiti, ovaj članak će se posebno fokusirati na problem osiguravanja da polje za unos može prihvatiti samo numeričke vrijednosti.
### JavaScript tehnika za ograničavanje unosa samo na brojeve
Rješenje koje ćemo koristiti uključuje vanilla JavaScript, bez potrebe za vanjskim bibliotekama.
Evo sažetka logike operacije: Kreiraćemo slušalac događaja u polju za unos koji će reagovati na događaj pritiska na taster. Kad god se pokrene događaj pritiska na tipku, slušatelj događaja će procijeniti test regularnog izraza na događaju pritiska na tipku. Ako test regularnog izraza ne uspije, ulazni događaj će biti spriječen.
Zaronimo u implementaciju koda.
document.querySelector('input').addEventListener('keypress', function (evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
evt.preventDefault();
});
### Objašnjenje koda korak po korak
Ovaj kod prilaže slušalac događaja 'pritiska na tipku' na polje za unos. Jednom kada se pokrene događaj pritiska na tipku, on prvo provjerava ASCII vrijednost znaka. Ako nije unutar raspona numeričkih ASCII vrijednosti (uključujući 48-57), zadana akcija događaja (umetanje znaka u polje za unos) je spriječena.
Razdvojimo to:
- querySelector('input'): Ovo je metoda koja vraća prvo polje za unos koje odgovara navedenom selektoru unutar dokumenta.
- addEventListener('keypress', function(evt)): Ova metoda dodaje slušatelj događaja navedenog tipa (pritisak na tipku) odabranom DOM elementu. Drugi parametar je funkcija koja se izvršava kada se događaj pokrene.
- evt.which ? evt.which : evt.keyCode: Ovo je uslovna operacija koja osigurava kompatibilnost s različitim pretraživačima. `evt.which` je nedefinisan u nekim starijim pretraživačima, u kom slučaju se koristi `evt.keyCode`.
- If (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)): Ovo je uslov koji provjerava da li je znak nedecimalni broj. 46 je ASCII vrijednost za znak tačke, a brojevi spadaju u ASCII raspon između 48 i 57.
- evt.preventDefault(): Konačno, ako je uslov ispunjen, zadana radnja događaja – koja je unošenje znaka u polje za unos – je spriječena.
### Dalji uvid u uključene funkcije i biblioteke
Gore navedeno rješenje koristi ugrađene JavaScript funkcije i svojstva i ne uključuje nikakve vanjske biblioteke. Evo malo više o glavnim elementima korištenim u našem rješenju:
JavaScript slušaoci događaja
JavaScript događaji su ono što web stranice čini responzivnim i interaktivnim. Slušatelj događaja osluškuje da li će se dogoditi određeni događaj.
U kontekstu HTML dokumenata, mogu se desiti brojni događaji, kao što je klik korisnika na element, prelazak miša preko elementa, pritisak na taster na tastaturi, itd. Ovi događaji se mogu koristiti za pokretanje skripti koje su definisane.
JavaScript regularni izrazi
JavaScript regularni izraz je niz znakova koji formira obrazac pretraživanja. U našem rješenju koristili smo regularni izraz da provjerimo da li je ulazna vrijednost unutar željenog raspona. Regularni izrazi olakšavaju testiranje više uslova i vrlo su zgodni kada je u pitanju validacija oblika.
Zaključno, ograničavanje unosa na brojeve samo u polju je ključna aktivnost u provjeravanju valjanosti obrazaca, jednoj od uobičajenih aplikacija JavaScript-a na webu. Ovo rješenje ne samo da osigurava ispravan unos podataka već i poboljšava korisničko iskustvo sprječavanjem nevažećih pritisaka na tipke.
