Dodatak Input mask za input-jquery maskedinput-upute, postavke, inicijalizacija

Trenutno, mnoge web stranice pružaju mogućnost slanja obrazaca za povratne informacije, od kojih su neka polja dizajnirana da prenesu podatke o kontaktu ili druge tipične informacije. Vrlo često je važno da ti podaci dođu na server u jednom formatu. Ovaj članak će se baviti rješavanjem ovog problema pomoću dodatka Masked Input, koji je jednostavan i lak za korištenje.

Prepoznatljive karakteristike i mogućnosti dodatka Masked Input:

• jednostavnost upotrebe
• fleksibilno podešavanje
• mogućnost kontrole funkcija omogućavanje/onemogućavanje/podešavanje parametara 
• podrška za validaciju/čitanje
• podrška regularnom izrazu
• provjera elementa za punjenje/formatiranje

Dodatak maski polja za unos sastoji se od glavnih dijelova:

• Demo HTML oznake
• JQuery skripta sa plugin kodom

Primjer instaliranja dodatka Masked Input

Preuzmite arhivu s dodatkom iz spremišta programera i kopirajte njen sadržaj u direktorij vaše web stranice.

!!! Da bi skripta radila, morate imati povezanu jQuery biblioteku.

Inicijalizacija i konfiguracija dodatka Masked Input.

Povežite jQuery framework i sam dodatak na dokument. Imajte na umu da ranije verzije dodatka možda neće raditi s kasnijim verzijama jqueryja.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maskedinput.js"></script>

Da povežete masku sa poljem za unos, morate dodati odgovarajuću klasu ili id:

<form action="/">  
	<input class="date" type="text" name="name"><br>  
	<input class="phone" type="text" name="name"><br>  
	<input class="phoneext" type="text" name="name"><br>  
	<input class="tin" type="text" name="name"><br>  
	<input class="ssn" type="text" name="name"><br>  
	<input class="product" type="text" name="name"><br>  
	<input class="eyescript" type="text" name="name"><br>  
	<button type="submit" name="submitbtn" value="Pošalji">Pošalji</button>  
</form>  

I inicijalizirajte dodatak maske za unos:

<script>
jQuery(function($){
	$('.date').mask('99/99/9999');
	$('.phone').mask('(999) 999-9999');
	$('.phoneext').mask("(999) 999-9999? x99999");
	$(".tin").mask("99-9999999");
	$(".ssn").mask("999-99-9999");
	$(".product").mask("a*-999-a999");
	$(".eyescript").mask("~9.99 ~9.99 999");
});
</script>

Osnovne konvencije:

• a - slova
• 9 - brojevi
• * - slova i brojevi
• ? - opcioni dio maske

Dio maske može biti promjenjiv. Simbol "?" označava sve znakove koji slijede kao neobavezne, tj. sve nakon toga se smatra izbornim za ulazak. primjer:

$('.phoneext').mask("(999) 999-9999? x99999");

Dodatne postavke dodataka

1. Mogućnost kreiranja vlastitih skupova znakova za unos.

Za kreiranje skupova znakova koristite svojstvo definicije, na primjer:

<script>
$(document).ready(function(){
	$.mask.definitions['~']='[+-]';
	$(".eyescript").mask("~9.99 ~9.99 999");
})
</script>

2. Izvršite radnju nakon što je unos završen.

Nakon što je unos završen, možete izvršiti funkciju koristeći završenu metodu, na primjer:

<script>  
$(document).ready(function(){  
	$(".ssn").mask("999-99-9999",{completed:function(){alert("Polje je popunjeno!")}});  
});  
</script>  

3. Zamjena rezerviranog mjesta u polju za unos.

Koristeći svojstvo placeholdera, možete postaviti čuvar mjesta na trenutno polje za unos, na primjer:

<script>
$(document).ready(function(){
	$(".date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
})
</script>

Zaključak

Možda su ovo sve informacije koje su vam potrebne da efikasno koristite jquery MaskedInput dodatak. Hvala svima na pažnji!