jQuery ile inputa girilen değerleri eş zamanlı temizlemek


Senaryomuz şöyle: Sadece harf ve rakam girişine izin vermek istediğimiz bir inputumuz var, Türkçe karakter, boşluk, büyük harf ve sembol girilmesini istemiyoruz. Bu ve benzeri olaylar için üretilen onlarca plug-in olmasına rağmen sayfamıza ekstra yük bindirip şişirmek istemiyor, bu işi sadece birkaç satırlık kodla halletmek istiyoruz.

İşte sayfamızın </head> tagından önce eklememiz gereken ilaç gibi kodlarımız:

1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){    
 $("#pislik").live("keyup", function() {
  var ohmis = $(this).val().replace(/[^a-z0-9]/gi,"").toLowerCase();  
  $(this).val(ohmis);
 });    
});
</script>

Bu da işlem yaptırmak istediğimiz, pislik id’sine sahip olan inputumuz (<body> tagından sonra, herhangi bir formun içerisine ekliyoruz):

1
<input type="text" id="pislik" />


Çalışan örneğimiz:

Ne güzel değil mi?

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

13 Yorum

  1. Bugün http://www.wmaraci.com‘da buna denk gelip. “Ne de güzel yapmışlar.” demiş, millet bunlar için çok uğraşıyor mudur diye merak etmiştim. Güzel bir cevap oldu. Bu aralar Egonomik’te yatıya kalacağım, müsaade varsa 😀

  2. Canerim, bu kod sitemin kayıt formunda çok işe yarayacak nick yada kullanıcı adı kısmına tuhaf tuhaf semboller yazamayacaklar çok teşekkür ederim.. Senden bir ricam olacak form da sadece ilk harfini büyük yapabilmek için kod da ne tür bir değişiklik yapmalıyım.. Biliyorum işlerin yoğun müsait olduğunda eğer sorum ile ilgili fikrin varsa ise yardımcı olabilir misin?

  3. Caner
    Yazar

    @Murat sorun derken scriptin ana işlevlerinden biri de Türkçe karakterleri ayıklamak zaten

    “Türkçe karakter, boşluk, büyük harf ve sembol girilmesini istemiyoruz”

  4. Tarık

    Hocam. burada şöyle bir şey yapılabilir mi;

    @, _ vs gib mail adreslerinde kullanılabilen özel karakterlere izin verilebilir mi?

    verilebilirse ne yapmamız gerekir?

    Teşekkürler, iyi çalışmalar.

  5. Furkan

    Merhaba caner,

    İnputa bir değer girildğinde aşağıdaki kod ile otomatik submit ediyorum. Bu inputa 5 karakterden fazla bir karakter girildiğin bu işlemi yapmak istiyorum nasıl olur sence?

    function gonder()
    {
    document.forms[“yangin”].submit();
    }

    onkeyup = gonder;

    • Caner
      Yazar

      jQuery ile şu şekilde yapabilirsin Furkan:

      1
      2
      3
      4
      5
      6
          $("#inputid").keyup(function(){
              if($(this).val().length>=5) {
                  //Formu gönder
                  gonder();
              }
          });

      Aynı zamanda formu göndermek için fonksiyon tamımlayıp içinde JavaScript kullanmana gerek yok. Forma bir id atayıp yine jQuery aracılığıyla $(“#formid”).submit(); diyerek gönderilmesini sağlayabilirsin.

  6. Onur

    Caner bey lütfen yardım ederseniz çok mutlu olurum bayadır böyle birşey arıyodum tam istediğim gibi fakat büyük harf girince küçük yapıyor bunu nasıl tam terine çevire biliriz küçük yazınca büyük olmasını istiyorumda lütfen yardım edebilirmisiniz

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir cevap yazın

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