jQuery plugins - Masked Input plugin
nov 16

Masked Input plugin

Maszkolt adatbevitel jQuery-vel

Verzió: 1.3
Kiadás dátuma: 2011
Fejlesztő: Josh Bush
Liszensz: MIT

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!