JQuery ile Kalan Karakter Sayısı Uygulaması

Bu yazımızda Jquery ile kalan karakter sayısı uygulamasını yapacağız. Aslında birçok sitede görüyoruz. Bir input etiketi veya textarea etiketi içerisine mesaj yazmamız istenir fakat mesajın max bir karakter sınırı olur.

Mesaj kutusunun altında ise bilgilendirme notu yazarlar. Max 200 karakter giriniz vs..

Yapacağımız uygulamada böyle olacak. Her bir karakteri yazdığımızda bilgilendirme notu güncellenecek ve yeniden hesaplanan kalan karakter sayısı görünecek.

Öncelikle sayfamıza Jquery’ i CDN olarak ekleyelim. Mesajı yazmak için bir textarea etiketi, bilgilendirme notu için de bir p etiketi tanımlayalım.

Html Kodları

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<textarea id="box" placeholder="Lütfen mesajınızı yazınız..."></textarea>
<p></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p></p>

</body>

</html>

Css Kodları

#box {
width: 220px;
height: 110px;
padding:15px;
}
p {
color: crimson;
}

#box {

width: 220px;

height: 110px;

padding:15px;

}

p {

color: crimson;

}

Jquery Kodları

$(document).ready(function () {
var maxKarakterSayisi = 200;
$("p").html("Kalan karakter sayısı : " + maxKarakterSayisi);
$("#box").keyup(function () {
$("#box").attr('maxlength', maxKarakterSayisi);
var yazılanKarakterSayisi = $("#box").val().length;
var kalanKarakterSayisi = maxKarakterSayisi - yazılanKarakterSayisi;
if (kalanKarakterSayisi >= 0) {
$("p").html("Kalan karakter sayısı : " + kalanKarakterSayisi);
}
});
});

$(document).ready(function () {

var maxKarakterSayisi = 200;

$("p").html("Kalan karakter sayısı : " + maxKarakterSayisi);

$("#box").keyup(function () {

$("#box").attr('maxlength', maxKarakterSayisi);

var yazılanKarakterSayisi = $("#box").val().length;

var kalanKarakterSayisi = maxKarakterSayisi - yazılanKarakterSayisi;

if (kalanKarakterSayisi >= 0) {

$("p").html("Kalan karakter sayısı : " + kalanKarakterSayisi);

}

});

Yazdığımız kodu kısaca açıklayacak olursak;

⇒ Burada max karakter sayısını 200 olarak belirledim. Siz dilediğiniz kadar belirleyebilirsiniz.

⇒ p etiketinin html’ine bu bilgiyi yazıyoruz.

⇒ Daha sonra klavyeden her tuşa basıldığında Jquery keyup olayı ile kalan karakter sayısını hesaplayıp, p etiketindeki bilgi notunu güncelliyoruz.

⇒ textarea etiketine vermiş olduğumuz maxlength parametresinin değeri ile 200 karakterden sonra yazılmasını engelliyoruz.

Uygulamamızın Son Hali

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

JQuery ile Listede Arama Yapmak

JQuery ile Tabloda Arama Yapmak

Yeni bir yazımda görüşmek üzere.

JQuery ile Kalan Karakter Sayısı Uygulaması

Yazar Hakkında

Yorum Yazın

Benzer Yazılar

Yazar Hakkında

Yorum Yazın