Linkedin Instagram Facebook Twitter Mail Youtube Whatsapp

jQuery ile Sadece Rakam, Harf veya Özel Karaktere İzin Verme

Hazırlamış olduğunuz bir input alanı veya textarea bölümüne sadece özel karakterler , sayılar ya da harf girişini kontrol etmek için bir düzenleme hazırlayalım. Örnek olarak bir telefon alanımız var ve kullanıcı haliyle buraya istemediğimiz değerler girebilir ya da harf , özel karakter girebilir. jQuery ile Sadece Rakam, Harf veya Özel Karaktere İzin Vermek istersek işte bu noktada jquery işimiz görüyor. Öncelikle bir input alanı oluşturduğumuzu varsayalım ve id ya da class değeri atayarak kontrol işlemini başlatalım.

<input type="text" name="telefon" class="yazibolum"/>

Şimdi jquery kodlarımızı oluşturmaya başlayabiliriz. Ardından da regex desenlerini kullanarak bu alana girilecek değerleri kontrol edebilir ve buna göre kullanıcıyı uyarabiliriz.

$(".yazibolum").keyup(function () {
    if (this.value.match(/[^0-9]/g)){
    this.value = this.value.replace(/[^0-9]/g,'');
  }
});

Yukarıdaki kodlara baktığımızda ilk göze çarpan detay keyup kullanılmasıdır. Burada o class’a ait olan veriye girilen her harekette işlem görmesini sağlıyoruz. Bir alt satırda ise girilen değer içinde bulunan regex ifadesi yer almaktadır. Alt satırda ise bunun dışında olan her veriyi temizle ifadesini replace ile belirtilmiştir. Kodlar çalıştığında rakam dışında bir karakter girildiğinde anlık olarak temizleme yaptığını görebilirsiniz.

Sadece rakam girişine izin vermek

$(".yazibolum").keyup(function (){

  if (this.value.match(/[^0-9]/g)){

    this.value = this.value.replace(/[^0-9]/g,'');

  }

});

Sadece harf girişine izin vermek 

$(".yazibolum").keyup(function (){

  if (this.value.match(/[^a-zA-Z]/g)){

    this.value = this.value.replace(/[^a-zA-Z]/g,'');

  }

});

Sadece özel karakter girişine izin vermek

$(".yazibolum").keyup(function () {

  if (this.value.match(/([A-Za-z0-9-]+)/g)){

    this.value = this.value.replace(/([A-Za-z0-9-]+)/g,'');

  }

});

Bu örnekler tabi arttırılabilir ancak temel anlamda en gerekli olan başlıklar bu şekilde. jQuery’nin nimetlerinden yararlanmayı ihmal etmeyin 🙂

Bir Yorum Yaz