JQuery Mask kullanımı

  • 10.09.2015
  • M.Tayyip Yetiş
  • JQuery

Merhaba, bu yazıda web uygulamalarında çokça ihtiyaç duyduğumuz bir özelliği bizim için kolayca halleden bir jquery eklentisinden bahdedeceğim. JQuery Maskedinput projelerinizde alfanumerik, sayısal, tarihsel, kredi kartı numarası ya da özel giriş formatları ile kullanıcılarınızdan veri girişi almanız için geliştirilmiş bir kütüphanedir. eskiden bu tür işlemler için geliştiriciler kendileri javascript metodları yazarak çözüm bulmaya çalışırlardı bu da doğal olarak fazladan zaman ve emek harcamaya sebep olurdu fakat Jquery her zaman olduğu gibi bu konuda da biz geliştiricilerin imdadına koşuyor. Sanırım bu kadar tanıtım yeter örnek kullanımlara bakalım eklentinin resmi sitesine  Buradan ulaşabilirsiniz

Bu eklentiyi kullanabilmek için önce JQuery kütüphanesini ve eklenti dosyasını sayfanıza bağlamanız gerekiyor 

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

Örnek formatlar için kullanım aşağıdadır. doğru kullanım için kodlarınızı $(document).ready() fonksiyonunuzun içine yazmalısınız

$(document).ready(function() {
   $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});  

Giriş başarılı bir şekilde tamamlandığında bir şey yaptırmak istiyorsanız örneğin textbox border rengini yeşil yapmak ya da alert uyarısı vermek gibi.

$("#product").mask("99/99/9999",{completed:function(){alert("Giriş başarılı ! "+this.val());}});


Regular Expression kullanarak kendi özel giriş deseninizi oluşturmak istiyorsanız şu şekilde kullanabilirsiniz

$.mask.definitions['h'] = "[A-Fa-f0-9]";
$("#phone").mask("#hhhhhh");

Umarım faydalı olmuştur. Bir dahaki yazıda görüşmek üzere

Mustafa Tayyip YETİŞ

Yazılım Geliştirme Uzmanı

Yorum Yap