İnputlara girilen değerleri belirli bir formata göre alabiliriz. Bu işlemi yapmak için bir eklenti kullanacağız.
Eklentinin kendi sitesine gitmek için tıkla || Eklentinin github sayfasına gitmek için tıkla
Eklentinin github sayfasından dosyalarımızı indiriyoruz. Bizim için tek gerekli dosya dist klasörü içerisindeki "jquery.maskedinput.min.js" dosyası diğer dosyaları silebilirsiniz. Şimdi bir tane "index.html" adında bir dosya oluşturalım,eklentimizi ve jquery kütüphaneimizi sayfamıza dahil edelim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Jquery dersleri</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$(function(){
});
</script>
</body>
</html>Eklentinin kullanımı çok basit. Bir tane input oluşturalım.
<input type="text" id="telefon_numarasi">Şimdi Jquery ile maskeleme işlemini yapalım.
$('#telefon_numarasi').mask("0(999) 999 99 99");Bu şekilde istediğimiz formatta telefon numarasını alabiliyoruz. Sadece telefon numarası değil daha birçok şekilde maskeme yapılabilir. Örnekte yazan 9 sayısı sayısal karakterleri temsil ediyor yani 9 yazan yerlere sadece (0-9) kadar sayısal değerler girebiliriz. Eğer sadece karakter girilmesini istersek bu seferde a harfini kullanıyoruz.
<input type="text" id="kelime">$('#kelime').mask("wab darslaram");Şeklinde tamamlanmasını istediğimiz yerlere "a" harfi ekliyoruz. Eğer hem sayısal değer hem karakter girilmesini istersek bu seferde tamamlanmasını istediğimiz yerlere "*" işaretini koyuyoruz.
Belirlenen karakterlerin girilmesini sağlamak
<input type="text" id="sayi"> $.mask.definitions['~']='[+-]';
$("#sayi").mask("~9.99 ~9.99 999");Bu şekilde "~" işaretini eklediğimiz yerlere sadece bizim belirlediğimiz karakterlerin girilmesini sağlayabiliriz.
Yorum yapmak için lütfen giriş yapın veya üye olun