Javascript: controlează ce se tastează


Atunci când un sit conţine un formular încep bătăi de cap: trebuie să te asiguri că vizitatorul completează câmpurile pe care le doreşti, şi pe cât se poate aşa cum le doreşti. De asemenea câmpurile din formular, dacă prin ele se introduc informaţii într-o bază de date să zicem, pot deveni porţi periculoase… În materialul de astăzi vă propun să ne limităm la o problemă: controlarea a ce se tastează să zicem într-un câmp input. În diverse situaţii dorim să ne asigurăm că de exemplu la câmpul vârstă, utilizatorii introduc doar cifre. Un cod bun găsiţi în această pagină. Reproduc jos, în blocul 1, esenţialul, adică funcţia Javascript, iar în blocul 2 modul în care o folosim pe un control input:

Foarte simplu şi eficient! Funcţia permite apăsarea tastelor cu cifre (0-9) dar şi a săgeţilor şi a tastelor de ştergere. Dar protecţia nu vă permite de exemplu să scrieţi numere negative (desigur, nu aveţi nevoie de aşa ceva la un câmp vârstă, dar poate este un formular cu indici economici). Va trebui să modificaţi if-ul ca să permită şi codul de la minus. Care o fi oare? De pe acelaşi sit vă recomand o altă pagină unde aveţi codurile generate de apăsarea diverselor taste. Tasta minus generează codul 109. În respectiva pagină, chiar înainte de tabel, aveţi un mic control unde puteţi apăsa ce tastă doriţi şi vi se va returna codul. Ce frumos! (Desigur, puteţi folosi funcţia de mai sus cu un alert(charCode) pentru a afla chiar Dvs codul generat de o anumită apăsare de tastă.)

Să mai vedem variaţii. Programatorii ştiu că ghilimelele şi apostrofurile dau bătăi de cap. Dacă de exemplu aveţi un câmp unde utilizatorul trebuie să îşi introducă nume (şi este vorba de români, nu de britanici sau alte neamuri unde numele mai includ apostrof), atunci puteţi simplu modifica funcţia de mai sus pentru ca să nu permită folosirea ghilimelei şi a apostrofului. Puteţi construi şi o funcţie care să permită strict folosirea literelor a-z şi A-Z. Şi utilizările pot continua… Având funcţia de mai sus ca model puteţi construi repede alte protecţii, pentru alte situaţii. Am testat cu succes funcţia în Internet Explorer, Firefox şi Opera.

BLOC 1

function isNumberKey(evt) {
   var charCode = (evt.which) ? evt.which : event.keyCode
   if (charCode > 31 && (charCode < 48 || charCode > 57))
      return false;
   return true;
}

BLOC 2

<INPUT id=”txtChar” onkeypress=”return isNumberKey(event)” type=”text” name=”txtChar”>

PS: Dacă navigatorul cu care vă este vizitată pagina cu formular nu are suport Javascript, sau navigatorul şi l-a dezactivat intenţionat? Mereu verificaţi şi în pagina de prelucrare a datelor (ASP, PHP…) corectitudinea completării.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *