
- 2184
- 10077
- 0
- -
Bevezető
Adatok bevitelekor néha szükség lehet rá, hogy informáljuk a felhasználót arról milyen típusú adatokat várunk és milyen formában. Ezt írhatjuk a beviteli mező label tag-jébe is, de sokkal praktikusabb megoldás, ha maszkolt beviteli mezőt használunk: azon túl, hogy információval szolgál a megkövetelt formátumról, a bevitt adatokat is szűri (csak a megfelelő típusú adatot és csak a megfelelő formában fogadja el).
A maszkolt bevitel kifejezetten hasznos lehet összetettebb adatok bevitelénél, úgymint például egy termék gyártási száma, motorkód, alváz szám, TAJ szám, stb.
Természetesen ezzel nem csak a felhasználót segítjük: mi is jobban járunk, ha olyan adatokat kapunk, amilyeneket várunk (persze ez csak féligazság, lásd. a "Tippek" c. bekezdést!)
Implementálás
JavaScript
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.maskedinput.js"></script>
Deklaráció
$(document).ready(function(){ $('#product').mask('9999/99/99'); //pl. éééé-hh-nn });
Használat
A használat magától értetődő, egy adott azonosítóval ellátott input mezőhöz rendelhetjük hozzá a plugin-t. Hogy milyen formában és milyen típusú adatokat várunk, azt a deklaráció során definiáljuk:
-
Alfanumerikus adatok definiálásához használt karakter: a
A plugin nem tesz különbséget kis- és nagybetűs karakterek közt, ami nem olyan égetően nagy hiba, azonban az már igen, hogy nem kezeli az ékezetes és a speciális karaktereket.$('#product').mask('aaa'); // 3 darab alfanumerikus karakter
-
Numerikus adatok definiálásához használt karakter: 9
$('#product').mask('999'); // 3 darab numerikus karakter
-
Tetszőleges karakter definiálásához használt karakter: *
A tetszőleges karakter alatt továbbra is csak a számokat és az angol ABC betűit értjük
(az ékezetes és speciális karakterek itt sem megengedettek).$('#product').mask('***'); // 3 darab tetszőleges karakter
Teljes paraméterlista
- placeholder: a beírandó karakterek helyét jelölő (kitöltő)karakter (alapértelmezett: '_')
-
completed: függvény meghívása helyes adatkitöltés végén
(A dokumentáció szerint ez létező funkció, azonban nálam a teszt során egyik böngészőben sem működött!) -
definitions: tetszőleges maszkoló szabály definiálása
(ennek használatára példa a demo oldalon található)
Tippek
-
FONTOS!
Minden űrlaphoz kapcsolódó jQuery plugin csak kliens oldali ellenőrzést takar, ami ebből kifolyólag könnyedén kikerülhető, ha a böngészőben letiltjuk a szkript futtatást. Pontosan ezért soha ne hagyatkozzunk csak erre, szerver oldali ellenőrzés mindig legyen a háttérben! - A plugin a jQuery v1.9 és az annál frissebb verziókkal nem működik!