Jquery Mask Eklentisi web sayfası geliştiricilerinin kullandığı olmazsa olmaz eklentilerden bir tanesidir. Bu yazıda da bu eklentinin bazı önemli kullanımlarını açıklayacağım.
Öncelikle Jquery Mask eklentisinin kabiliyetlerinden biraz bahsedelim.
Jquery Mask ile Neler Yapılır?
Jquery mask ile form nesnelerini telefon, tarih, posta kodu, iban numarası, kredi kartı numarası gibi biçimli göstermek için kullanılan bir eklentidir.
Örn: 10/06/1980 gibi ekranda tarih değerini göze hoş gelen bir biçimde gösterme şansımız var.
Kurulum:
Jquery ve Jquery mask eklentisini indirdip projemize dahil ediyoruz. Yada CDN üzerinden doğrudan kullanıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script> <script> //script kodları burada olacak </script> </head> <body> <!-- html kodları --> </body> </html> |
Tarih formatında yazdırma
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script> <script> $(document).ready(function(){ $('.tarih').mask('00/00/0000'); }); </script> </head> <body> <input type="text" class="tarih"> </body> </html> |
Yer tutucu kullanarak giriş yapmayı kolaylaştırabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script> <script> $(document).ready(function(){ $('.tarih').mask('00/00/0000',{placeholder: "__/__/____"}); }); </script> </head> <body> <input type="text" class="tarih"> </body> </html> |
Telefon Formatında Yazdırma
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script> <script> $(document).ready(function(){ $('.telefon').mask('(000) 000-00-00'); $('.telefon_maskeli').mask('(000) 000-00-00',{placeholder:"(___) ___-__-__"}); }); </script> </head> <body> <input type="text" class="telefon"> <input type="text" class="telefon_maskeli"> </body> </html> |
Para Birimi Formatı Yazdırma
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script> <script> $(document).ready(function(){ $('.para').mask('000.000.000.000.000,00', {reverse: true}); }); </script> </head> <body> <input type="text" class="para"> </body> </html> |
Harf ve Rakam Filitrelime (İlk iki karakter harf, sonraki 3 karakter rakam olması için)
Zorunlu harf girişi için A sembolü zorunlu sayı girişi için 0(sıfır) sembolü kullanılmaktadır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script> <script> $(document).ready(function(){ $('.karisik').mask('AA000'); }); </script> </head> <body> <input type="text" class="karisik"> </body> </html> |
Daha fazla biçim özelliği için eklentinin kaynağını inceleyebilirsiniz.
[…] Jquery Mask Kullanma […]