jQuery İle Karakter Sayısı Sınırlama

Web uygulamalarımızda çokça kullandığımız form elemanlarından input ve textarea gibi metin girişi yapılan alanlara karakter sınırlaması yaptırmak isteyebiliriz.Böylelikle kullanıcıların girdiği uzunlukları kontrol edebilir ve bizim istediğimizin dışında bir karakter sayısı dışına çıkmalarına engel olabiliriz. Örnek olarak parola alanının 20 karakterden fazla olmamasını sağlayabiliriz. Örnek olarak başka bir kullanım alanı söyleyecek olursak SEO’da çokça kullanılan meta etiketlerinin sınırını belirleyebiliriz. Mesela meta etiketlerinden title‘ın karakter olarak en fazla 60-65 arasında olması arama motorları açısından daha sağlıklıdır. Yapmış olduğumuz bir blog sayfasının meta title alanının sınırını bu şekilde 60 karakter olarak belirleyebilir, kullanıcı 61. karakteri girmek isterse girmesine izin vermeden işlemini tamamlamasını sağlayabiliriz.

Bu makalemizde jQuery kodları ile bir karakter sınırlama işlemi yapacağız.

Yukarıda ilk olarak html sayfamızı paylaştım. Burada stil dosyamızı ve jQuery kodlarımızı yazdığımız script dosyamızı sayfaya dahil ettim. Ayrıca jQuery kodlarımın çalışabilmesi için jQuery kütüphanesini de sayfamıza dahil ettim. Ardından body etiketleri içerisine kullanacağım html etiketlerimi yerleştirdi.

Yukarıda css kodlarımızı paylaştım. Bu kodlar sayesinde html etiketlerimize stil vermiş ve hem yerleşimlerini hem de renklerini vs. ayarlamış oldu.

Geldik jQuery kodlarını paylaşmaya.

karakterSayisi ve kalanKarakter değişkenleri ile textarea içerisine girilebilecek maksimum karakter sayısını belirlemiş olduk. keyup() metodu ile textarea içerisinde bir tuşa basıldığı anda işlem yapmaya başlıyor. Ardından gerekli kontroller sağlanarak işlemleri yapmaya devam ediyor.

Demoyu Görüntüle

Zaman bulabilirsem bunun geniş anlatımlı videosunu çekip atacağım. Şimdilik burada dursun bu :)

You may also like...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir