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

13 Yorum

  1. yusuf dedi ki:

    Bugün 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 :D

  2. Caner Öncel dedi ki:

    Eheh ayıpsın Yusuf bi yatak atalım sana :)

  3. Sonkan BAYRAKTAR dedi ki:

    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?

  4. Caner Öncel dedi ki:

    İşine yaramasına sevindim Sonkan,

    İstediğin şey için ise şurdan fikir alabilirsin:
    http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript

  5. Alperent dedi ki:

    Çok hoş olmuş teşekkürler.

  6. Murat dedi ki:

    Türkçe karakterlerdeki sorunu göz önünde bulundurunuz.

  7. Caner Öncel dedi ki:

    @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”

  8. Tarık dedi ki:

    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.

  9. Furkan dedi ki:

    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 Öncel dedi ki:

      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.

  10. Onur dedi ki:

    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

  11. flexbilisim dedi ki:

    BİLGİ İÇİN TESEKKÜRLER

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