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.
[PHP]
jQuery İle Karakter Sayısı
[/PHP]
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.
[PHP]
* {
padding: 0;
margin: 0;
font-size: 14px;
font-family: Tahoma;
}
div.container {
margin-top: 50px;
display: block;
text-align: center;
}
h2 {
background-color: #1dcaff;
color: #333;
text-align: left;
padding: 10px 15px;
}
div.alan {
text-align: center;
background-color: #0084b4;
display: inline-block;
color: #c0deed;
}
textarea {
border: 0px;
border-left: 1px solid #0084b4;
border-right: 1px solid #0084b4;
resize: none;
padding: 10px 15px;
}
div.karakterBilgi {
padding: 15px;
}
div.karakterBilgi span {
background-color: #1dcaff;
padding: 10px 15px;
color: #333;
}
[/PHP]
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.
[PHP]
$(function(){
var aciklama = “”;
var karakterSayisi = 60;
var kalanKarakter = 60;
$(“span”).html(kalanKarakter);
$(“textarea”).keyup(function(){
aciklama = $(“textarea”).val();
var uzunluk = aciklama.length;
if(kalanKarakter > 0){
var yeniKarakterSayisi = karakterSayisi – uzunluk;
kalanKarakter = yeniKarakterSayisi;
$(“span”).html(kalanKarakter);
} else {
var yeniKarakterSayisi = karakterSayisi – uzunluk;
kalanKarakter = yeniKarakterSayisi;
if(kalanKarakter < 0){ $("span").html(0); } else { $("span").html(kalanKarakter); } $("textarea").val(aciklama.substr(0, karakterSayisi)); } }); }); [/PHP] 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.
Zaman bulabilirsem bunun geniş anlatımlı videosunu çekip atacağım. Şimdilik burada dursun bu :)
