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ı

Css Kodları

Jquery Kodları

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.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link