5 Eylül 2016 Pazartesi

Form üzerinde tüm text'ler büyük harf olsun:

En pratik çözüm css kullanmaktır:

input[name='elementName'] {
  text-transform: uppercase;
}

css dosyasına bu kodu ekle:

name adlı text'i büyük harf yapar

input[name='name'] {
  text-transform: uppercase;
}


eğer bütün textler büyük harf olsun istenirse:

input {
    text-transform: uppercase;
}



Eğer bazı textler normal, diğerlerinin tamamı büyük harf olsun istenire,mesela kullanıcı ve şifre girişleri normal olsun:

input[name='username'] {
  text-transform: none;
}

input[name='password'] {
  text-transform: none;
}

input {
    text-transform: uppercase;
}


eğer Textarea elementi büyük harf olsun istenirse:

textarea{
 text-transform: uppercase;
}


Önemli not:

"text-transform: uppercase;" durumu Türkçe karakter sorunlarına sebep olabilir.Mesela
i ve İ harflerinde sorun çıkacaktır.Çözüm için,nesneye lang="tr" tagını ekleyin .Örnek:

<input type="text" id="id_customer" name="customer" lang="tr"/> 


Bir input için bunu yapabiliyoruz.Peki django tarafından form.as_p ile oluşturlan formdaki
tüm inputlara bunu nasıl atayabiliriz.Zira

input {
    text-transform: uppercase;
}

içine lang:'tr' yazma şansımız yok.Bu durumda jQuery kullanmak zorundayız.css dosyasına
yukarda yazılanları siliyoruz, her html template dosyasına bu jQuery kodunu ekiyoruz.Böylece
capslock küçük harf durumunda iken i tuşuna basıldığında I değil İ gelmiş olacaktır:

<script type="text/javascript">
String.prototype.turkishToLower = function(){
  var string = this;
  var letters = { "İ": "i", "I": "ı", "Ş": "ş", "Ğ": "ğ", "Ü": "ü", "Ö": "ö", "Ç": "ç" };
  string = string.replace(/(([İIŞĞÜÇÖ]))/g, function(letter){ return letters[letter]; })
  return string.toLowerCase();
}

String.prototype.turkishToUpper = function(){
  var string = this;
  var letters = { "i": "İ", "ş": "Ş", "ğ": "Ğ", "ü": "Ü", "ö": "Ö", "ç": "Ç", "ı": "I" };
  string = string.replace(/(([iışğüçö]))/g, function(letter){ return letters[letter]; })
  return string.toUpperCase();
}

    jQuery(document).ready(function(){
        jQuery('input').keyup(function() {
            this.value = this.value.turkishToUpper();
        });
        jQuery('textarea').keyup(function() {
            this.value = this.value.turkishToUpper();
        });
    });
</script>



Hiç yorum yok:

Yorum Gönder