jQuery ile Dinamik Olarak Oluşturulan Elemente Erişmek

jQuery ile DOM’da bulunan elementlere $('.element') şeklinde kullanarak erişebiliyoruz. Fakat dinamik olarak oluşturulan elementlere erişmek için farklı bir durum söz konusu oluyor. Bunun için şu kullanım yeterli geliyor:

$('body').on('click', '.element', function(){
    console.log($(this).html())
})

Kolay gelsin.

Girdi Değerini Büyük Harfe Çevirmek

Merhaba, JavaScript ile girdi değerini büyük harfe çevirme ihtiyacı duydum. Daha önceden de karşılaşmıştım. Bu sefer Angular JS ile gerekti. Ama ben hepsini burada yazacağım.

<input type="text" onKeyup="this.value = this.value.replace('i','İ').toUpperCase()">

Yukarıda özellikle i harfini İ harfine değiştirdim (replace). Çünkü ingilizce karakter olan i, değiştirmediğimde I harfine çevriliyor.

jQuery ile

$(function() {
    $('input').keyup(function() {
        this.value = this.value.replace('i','İ').toUpperCase();
    });
});

Güncelleme: Yazıldıktan sonra değil de, yazıldığı anda büyük harf yazılması için şu da uygundur:

$('.buyukHarf').on('input', function(evt) {
  $(this).val(function (_, val) {
    return val.replace('i', 'İ').toUpperCase();
  });
});

Angular JS ile

$scope.girdi = $scope.girdi.replace("i", "İ").toUpperCase();

Kolay gelsin.

JQuery ile Arama Motoru Dostu URL (SEF)

Arama motoru dostu bağlantılar, WordPress gibi birçok içerik yönetim sisteminde kullanılır. Ben de yazdığım bir betikte kullanma ihtiyacı duydum. Bir gönderinin başlığını arama motoru dostu bağlantı haline getirmesi için bir jQuery eklentisi buldum. Adı jQuery FriendURL. Dimitar Ivanov adlı bir arkadaş yazmış. Kullanımından kısaca bahsedelim.

<script src="js/jquery.friendurl.min.js"></script>
<p>
    <input type="text" id="baslik" placeholder="Başlığı yazınız" /><br />
    <input type="text"id="sef" placeholder="Arama motoru dostu bağlantı" />
</p>

<script type="text/javascript">
$(function(){
    $("#baslik").friendurl({id : "sef"});
});
</script>

Kodu çalıştırdığımız vakit, baslik ID’li girdi elementine yazılan herhangi bir içerik, sef ID’li girdi elementine otomatikmen arama motoru dostu bağlantı olarak düşecektir. Örneğin “Merhaba, bu bir denemedir” yazdığımızda SEF değeri “merhaba-bu-bir-denemedir” olarak eş zamanlı güncellenecek. Fakat “Merhaba, bu türkçe karakter denemesidir” yazdığımızda şöyle bir sıkıntı ortaya çıkacak: “merhaba-bu-trke-karakter-denemesidir“. Türkçe karakterler gözükecek. Buna çözüm için aşağıdaki gibi kullanmamız gerekecek:

<script type="text/javascript">
$(function(){
    $("#baslik").friendurl({id : "sef", divider: "_", transliterate: true});
});
</script>

Burada divider özelliği ile ayırıcıyı _ (alt tire) olarak belirliyoruz ve transliterate özelliğine true değeri vererek aksi karakterleri çevirmesini sağlıyoruz.

Şimdi “Merhaba, bu bir türkçe karakter denemesidir! ÜĞİŞÇÖüğişçö” yazdığımızda bize vereceği sonuç “merhaba_bu_bir_turkce_karakter_denemesidir_ugiscougisco” değeri olacak.

Buradan da test edebilirsiniz. Haydi kolay gelsin.