Bu dersimizde Twitter'da olduğu gibi jQuery ile kalan karakter uygulaması yapacağız. İlk olarak Html görünüşünü hazırlıyalım. Ben Css kısmına karışmadım siz kendiniz isterseniz Css ile biçim verebilirsiniz .
<textarea name="icerik" class="icerik" cols="30" rows="5" placeholder="İçerik"></textarea>
<p class="kalan_karakter"></p>
Bu şekilde iki tane etiket oluşturduk textareaya girilen değere göre kaç karakter kaldığını "p" etiketimize yazdıracağız. Şimdi jquery kodlarımızı yazalım .
$(function(){
var karakterSayisi = 10; // Karakter sınırının ne kadar olduğunu yazıyoruz
$('p.kalan_karakter').html(karakterSayisi+" Karakter kaldı"); // İlk olarak hiçbir işlem yapmadan toplam karakter sayısını p etiketmize yazdırıyoruz
$("textarea.icerik").attr("maxlength",karakterSayisi); // Textarea maksimum karakter sayısı belirtiyoruz.
$("textarea.icerik").keyup(function(){ // Textarea'ya değer girildiğinde
var uzunluk = $(this).val().length; // Textarea'ya girilen değerin uzunluğunu al
var toplamKarakter;
toplamKarakter = karakterSayisi - uzunluk; // karakter sayısından uzunluğu çıkarıp değişkene aktar
if(toplamKarakter < 0) // Eğer sıfırdan küçükse
{
$(this).val($(this).val().substr(0,karakterSayisi)); // karakter sayısından fazla değer girmeyi önle
}else{
$('p.kalan_karakter').html(toplamKarakter+" Karakter kaldı"); // Karakter sayısını yazdır
}
});
});
İşlem bu kadar basit . Bu karakter sınırını aşmak imkansız gibi olsada sunucu taraflı iş yapıyorsanız veriyi sunucu tarafındada uzunluğunu kontrol ettirmenizi öneririm.
Yorum yapmak için lütfen giriş yapın veya üye olun