İstediğimiz Formatda TextBox’lar Oluşturma | Masked Input Plugin

Merhaba arkadaşlar, bazen yaptığımız projelerde ve sitelerde özellikle iletişim formlarında telefon kısmına kullanıcının herhangi bir harf girmemesini, kaç sayı olacağı veya alan koduyla birlikte girmesini isteyebiliriz. Bunun için yazacağımız JavaScript kodları işimizi görmeyebilir. Bu yüzden digitalbush sitesi Masked Input adında plugin geliştirmiş. Çoğu sitede kullanıyorum ve bence en iyi plugin. Şimdi sizle bu plugin’i inceleyelim.

Plugin’in gerçek adresi ;
MASKED INPUT PLUGIN

Ardından tagları arasına aşadağıki dosyaları sitemize dahil edelim.

<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Dahil ettiğimiz plugini kullanmaya başlayalım. Yine tagları arasında aşağıdaki kodu ekleyelim.

<script type="text/javascript">
$(document).ready(function(){
  $("#telmask").mask("(9999) 999-9999");
});
</script>

Burada “#telmask” bizim input id’mizdir. Input kodunuza id tanımlayarak orada yazdığınız id’yi bu kısma yazmalısınız.

$(“#telmask”).mask(“(9999) 999-9999”); : (0212) 222-2222 bu şekilde alan oluşur.
$(“#date”).mask(“99/99/9999”); : 01/01/2014
$(“#ibanmask”).mask(“?TR 99 99999 9 9999999999999999”); : Buda başka bir kullanım şeklidir. Alanda bizim istediğimiz herhangi bir karakter veya yazı olmasını istiyorsak başına “?” işareti ekleyip sonra yazacağımız yazıyı veya numarayı ekliyoruz. Örnek olarak ben TR yazdım.

Şimdi input’a id’mizi tanıtalım.

<input id="telmask" type="text" placeholder="Telefonunuz" />

Pluginin kullanımı bu şekildedir. Daha detaylı örnekler için makale başında verdiğimiz siteyi ziyaret ediniz.


1 Yorum

  1. mehmet Yanıtla

    merhaba. güzel bir makale ancak bu plugin özellikle android uyumlu mobil cihazlarda kullanıldığında hatalı çalışıyor bildiğim kadarı ile. şöyle siz 1234567890 olarak girdiniz diyelim, uygulama bunu tersten yazarak 0987654321 şeklinde yazıyor. sizin bu konudaki tecrübeniz nedir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.