jQuery ile inputa girilen Türkçe ve özel karakterleri, büyük harfleri, boşlukları eş zamanlı temizlemek

Konu başlığına bir kere daha baktım da sanki böyle “Balya balya kod geliyor” gibi bir imaj uyandırmış. Evet esasen tüm bu işleri yapacağız ama gerçekten olabildiğince kısa, hatta birkaç satır sayılabilecek orta düzey kodlarla. Gözünüz korkmasın yani.

Sabırsız olduğum için olsa gerek; her ne kadar iyi bir anlatıcı olmasam da eskiden sitede bu tür konulara daha fazla yer vermeye çalışırdım. Yine şevkimden bir şey kaybetmiş değilim ancak son zamanlarda ofiste yoğun projeler üzerinde çalıştığımız için gönül eve gelince FIFA 2013 oynamak, kafa neyin dağıtmak istiyor. Harbi diyorum, Regina ve Inter’de bir müddet top koşturduktan sonra an itibariyle Paris SG’de 9 numaralı formamla forvet oynuyorum. 28 milyon dolarlık transfer ücretimi ödeyebilecek olan herkesle masaya oturmaya hazırım.

İşimize dönecek olursak. Özetle alan adı gibi işlerle uğraşanların sıklıkla ihtiyaç duyabilecekleri bir input temizleme işlevinden söz ediyoruz. Bu işlevin üstlendiği vazife, olabildiğince açıklayıcı olmaya çalıştığım başlıkta da belirttiğim üzere şöyle:

  1. Girilen değerin içindeki boşlukları temizlemek ve tire işareti (-) ile değiştirmek
  2. Büyük ve küçük Türkçe karakterleri (ç,ş,ö,ü,ğ,ı) İngilizce karşılıklarına (c,s,o,u,g,i) çevirmek ve kullanılmasına izin verdiklerimiz haricinde özel karakterleri (%&#$½ vb.) temizlemek
  3. Değeri tamamen küçük harfli yapıya dönüştürmek

Yani kullanıcı form içerisinde yer alan, belirlediğimiz inputa “Şaşkın Öğretmen Çağırdı!” yazmak istediğinde bu değer eş zamanlı olarak “saskin-ogretmen-cagirdi” şeklinde temiz bir değere dönüştürülüyor.

Sözü fazla uzatmadan kodlarımıza geçelim. Neyin ne olduğunu, hangi satırın ne işe yaradığını dilim döndüğünce kodların içinde ifade etmeye çalıştım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
$(document).ready(function(){

    /*
        Input içinde bir tuşa basıldığında fonksiyonumuzu çağırıyoruz
    */

    $("#input").keyup(function() {
        clearInput($(this).attr('id'));
    });

    /*
        Kullanıcı inputtan ayrıldığında yine fonksiyonumuzu çağırıyoruz.
        (Kopyala - yapıştır işlemlerinde bug çıkmaması için)
     */

    $("#input").focusout(function() {
        clearInput($(this).attr('id'));
    });

}); //doc ready end

    /* Tüm işi yapan fonksiyonumuz */
    function clearInput(id) {

        /*
         Türkçe karakterlerin değiştirilecekleri karşılıklarını tanımlıyoruz.
         */

        var charMap = {Ç:'c',Ö:'o',Ş:'s',İ:'i',I:'i',Ü:'u',Ğ:'g',ç:'c',ö:'o',ş:'s',ı:'i',ü:'u',ğ:'g'};

        /*
         Anlık input değerini (value) alıyoruz.
         */

        var str = $("#" + id).val();

        /*
         Inputa girilen Türkçe karakterleri yukarıda tanımladığımız değerlerle değiştiriyoruz.
         Bu zahmete katlanmamızın nedeni JavaScript ile Türkçe karakterleri sağlıklı biçimde,
         herhangi bir bug oluşmasına mahal vermeden değiştirebilmek.
         */

        str_array = str.split('');

        for(var i=0, len = str_array.length; i < len; i++) {
            str_array[i] = charMap[ str_array[i] ] || str_array[i];
        }

        str = str_array.join('');

        /*
         Alfanumerik olmayan özel karakterlerin temizlendiği yeni bir value oluşturuyoruz:
         1. replace(" ","-") ile boşlukları tire (-) işaretiyle değiştiriyoruz.
         2. replace("--","-") ile iki tane yan yana (--) tire işareti oluşmasının önüne geçiyoruz
         3. replace(/[^a-z0-9-.]/gi,"") ile temizlik işlemini gerçekleştiriyor, - ve . gibi karakterlerin
         temizlenme işleminden hariç tutulmasını sağlıyoruz.
         4. toLowerCase() ile değişkeni tamamen küçük harflere çeviriyoruz.
         */

        var clearStr = str.replace(" ","-").replace("--","-").replace(/[^a-z0-9-.çöşüğı]/gi,"").toLowerCase();

        /*
         Son olarak işlemden geçirdiğimiz değeri tekrar inputa basıyoruz
         */

        $("#" + id).val(clearStr);

        /*
        Aşağıdaki olay tamamen işin geyiği, silebilirsiniz
        */

        $("#result").html("Adeta sihir kullanıyormuşcasına...");

    }

Çalışan uygulamayı incelemek ve scriptin tüm dosyalarını bilgisayarınıza indirmek için aşağıdaki bağlantıları kullanabilirsiniz. “Aga bu nedir? Ben denedim olmadı. Peki şu şu olayı nasıl yapıyoruz?” türü takıldığınız tüm noktaları yorum olarak aktarabilirsiniz, yine bilgim dahilinde tüm sorularınızı cevaplamaya çalışacağım.

Ayrıca benzer bir input kontrol işlevi için aşağıdaki konuyu da gözden geçirmek isteyebilirsiniz:
jQuery ile basit form input kontrolü

Önizleme
İndir (72 KB)

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

21 Yorum

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