Masked Input plugin

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!