Maszkolt bevitel Jquery-vel

A maszkolt karakterbevitel nagyon hasznos mind fejlesztői, mind felhasználói oldalról. A felhasználó oldaláról egyértelművé teszi, hogy milyen formában várjuk az adatot és csak olyan formában engedi beírni. A fejlesztő oldaláról pedig lehetővé válik olyan funkciók építése, mint a telefonszámra keresés.

Amikor felmerült az igény, hogy lehessen keresni telefonszámra - pl. egy vállalati alkalmazás esetében - rögtön jött a következő kérdés: hogyan is? Kötőjellel, anélkül, szóközzel anélkül. Maszkolt bevitellel egységes formátumú telefonszámok lesznek tárolva, így a keresés is leegyszerűsödik.

Megvalósítás

A JQuery-hez létezik Masked Input nevű Plugin. Használata nagyon egyszerű. Íme egy példa:

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");

});

A maszkolás definiálásánál kétféle karaktert használhatunk a helyőrző és a maszk. A helyőrzök, azok amelyek a karakterbevitelt tesznek lehetővé. A helyőrzők az alábbiak lehetnek:

• a - betű karakter (A-Z,a-z)
• 9 - szám karakter (0-9)
• * - alfanumerikus karakter (A-Z,a-z,0-9)

Minden olyan karakter amely nem helyőrző maszkként viselkedik. A beviteli mezőbe történő íráskor a maszk karakterek megjelennek, a helyőrzők pedig aláhúzás karakterként szerepelnek. Csak a helyőrző karakterek helyére lehet az előre definiált maszk alapján adatot bevinni.

Például a 9999-99-99 maszk esetében a beviteli mezőben a ____-__-__ fog megjelenni. Hiába ütünk lesz karakter billentyűt nem fog történni semmi, csak számokat enged bevinni és csak az aláhúzás karakterek helyére. Bevitelkor a maszk karaktereket automatikusan átugorja és a következő helyőrzőre lép. Tehát a bevitel nagyon gyors.

A Plugin Internet Explorer 6/7, Firefox 1.5/2, Safari és Opera böngészökkel lett tesztelve. A tömörített (packed) plugin fájl mérete 2.8k.

A Plugin letölthető az alábbi címről: http://digitalbush.com/projects/masked-input-plugin