Sales1 min read166 words

Jquery ile Twitter gibi 140 karakter sınırlı metin alanı yapımı

Emir Eskici

PlusClouds Author

Cloud & SaaS

Jquery ile 140 Karakter Sınırlı Metin Alanı Nasıl Yapılır

Jquery kullanarak 140 karaktere duyarlı metin alanı yaratma

Jquery, JavaScript kullanımını kolaylaştırmak için aynı dilde yaratılmış bir JavaScript kütüphanesidir. Hem JavaScript hem Ajax hem de efekt kütüphanesi ihtiyacını karşılamak için 2006’dan beri kullanılan Jquery’nin yararları ve sağladığı avantajlar anlatan ufak bir blog yazısı yazmıştım. Bu blogda da sizin için, Jquery’i 140 karakter saydırma nasıl yapılır? sorusunu yanıtlayacağım.

Öncelikle Html ile basit bir textarea ve altında girilen karakterlerimizi gösterecek basit alan oluşturuyorum.

HTML

Description

Şimdi Sırada Jquery Kodlarımız Var

JavaScript/Jquery

$(function (){

$("#textAlani").keyup(function (e) { // textarea'yı seçtim ve içerisine fonksiyonlarımı giriyorum 

    var harfLimiti=140;  //Girilecek max harf sayısını belirttim
    var sayac=$(this).val().length; // Yukarıda ki 140 harf sayısını kontrol edecek bir değişken tanımladım
    
    $("#girilenHarf").text(sayac) //Girilen Harfleri Gösterecek ufak tanım 
    $("#kalanHarf").text(harfLimiti-sayac) // Bize kalan harf sayısını göstermesi için

    if (sayac>harfLimiti) { 
        $("#uyari").text("Daha Fazla Harf Giremezsiniz...")
    }// Eğer sayactaki harf sayısı 'harfLimit' değişkeni içerisinde ki sayıyı geçer ise seçilen element içerisine
    //  text özelliği ile şu metni yazdır "Daha Fazla Harf Giremezsiniz..."
});

})

Jquery’i 140 karakter saydırma nasıl yapılır?

Sonuç

Description

Frequently Asked Questions

Jquery ile 140 karakter sınırlı metin alanı nasıl oluşturulur?

Bu örnekte HTML ile basit bir textarea oluşturuluyor ve altında girilen karakterler gösteriliyor. Kodda harfLimiti 140 olarak ayarlanıyor ve keyup olayında sayac, girilen karakter sayısını ve kalan karakter sayısını güncelliyor. Eğer karakter sayısı limite ulaşırsa uyarı mesajı gösteriliyor.

HTML'de hangi elemanlar kullanılıyor ve hangi değerler gösteriliyor?

Bir textarea kullanılıyor ve altında üç alan bulunuyor: girilen karakter sayısını gösteren #girilenHarf, kalan karakter sayısını gösteren #kalanHarf ve sınırı aşınca gösterilen uyarı #uyari.

Harf sayımında hangi değişkenler kullanılıyor ve ne anlama geliyor?

harfLimiti değişkeni maksimum karakter sayısını tutar (140). sayac değişkeni ise textarea içeriğinin uzunluğunu tutar. Kod bu değerleri kullanarak girilen karakter sayısını ve kalan karakter sayısını günceller.

Hangi olay dinleyicisi ile sayım güncelleniyor?

Textarea üzerinde keyup olayı kullanılarak her tuş vuruşunda sayım tetiklenir. Bu sayede girilen karakterler anlık olarak izlenir.

Kullanıcı 140 karakteri aştığında ne olur?

sayac harfLimiti değerini aştığında kod #uyari öğesinin içeriğini 'Daha Fazla Harf Giremezsiniz...' olarak ayarlar ve kullanıcıya uyarı gösterilir.

Bu örnekte sayacı hangi çıktılar kullanıcıya gösteriliyor?

girilenHarf alanında girilen karakter sayısı, kalanHarf alanında kalan karakter sayısı gösterilir. Ayrıca limit aşıldığında uyari alanında bir mesaj görüntülenir.

Bu 140 karakter saydırma örneği hangi dil ve kütüphane ile yazılmıştır?

JavaScript ile yazılmış bir örnek olup Jquery kütüphanesi kullanılarak sayım işlemi gerçekleştirilmiştir. Jquery’nin amacı JavaScript kullanımını kolaylaştırmaktır.

Jquery ile Twitter gibi 140 karakter sını… | PlusClouds Blog