LZ3G – Webmaster Blog! php, Mysql, JQuery, Java, Wordpress

JQUERY EXTENSION METHODLARI – SADECE SAYI GIRIŞI

JQUERY EXTENSION

.Net’te olduğu üzere jQuery’de de extension method yazabiliriz. Bunun için jQuey’e ait extend methodunu kullanıyoruz. Extend’in kelime anlamı uzatmakdır. Yani jQuery methodlarına yenisini ekliyoruz.

Bu extension method uygulanan textbox’lara sadece sayı girişi yapmamıza yarıyor diğer girilen bütün karakterleri blokluyor. Tabi bizim izin verdiklerimiz dışındakileri..


jQuery.fn.extend({
            typeNumber: function (extraKeys) { 1
                         var selected = $(this);
                         $.each(selected, function () { 2
                                     $(this).keydown(function (e) {
                                     if ($.inArray(e.keyCode, extraKeys) !== -1 || (e.keyCode == 65 && e.ctrlKey === true)) {
                                           return true; 3
                                       }
                                    else if (((e.keyCode >= 48 && e.keyCode <= 57)) || (e.keyCode >= 96 && e.keyCode <= 105)) {
                                    return true; 4 
           }
           else
                             e.preventDefault(); 5
         });
   });
  }
});

Methodu kısaca antlamak gerekirse

1. Adımda methodun uygulandığı elementleri seçiyoruz.
2. Adımda Seçilen o elementlerin içinde dönüyoruz
3. Adımda Onların keydown eventinde klavyeden basılan tuşun(e.keyCode) method için istisna saydığımız karakterler(extraKeys) içinde olup olmadığına bakıyoruz. ve ya CTRL + A kombinasyonuna uyuyormu onu kontrol ediyoruz.
4. Adımda ise basılan tuşun klavyedeki sayısal karakterlerin kodlarına uyuyormu bunu kontrol ediyoruz.
5. Adımda ise bütün bu olasılıklar dışında ise geriye false döndürüyoruz.

Kullanım ise:

$(“#txtNumber”).typeNumber(new Array(8, 9, 13));

8, 9, 13 – Sırasıyla.. BackSpace, Tab , Enter

İyi Kodlar!