Yükleniyor ...

Üye giriş

E-posta adresiniz
Şifreniz
Şifremi unuttum

Üye Kayıt

Kullanıcı adı
E-posta adresiniz
Şifreniz
Şifre tekrar
Giriş yap

JQuery kalan karakter uygulaması

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 laughing

<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 smile.

$(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 laughing. 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.

Yorumlar(0)

Yorum yapmak için lütfen giriş yapın veya üye olun