jQuery ile Kalan Karakter Uygulaması

Uzun zamandır blogla ilgilenemiyorum, yaklaşık olarak 3-4 aydır. Hosting firmasıyla yaşadığım sorunlar ve iş güç yüzünden gecikti bu kadar.Bundan sonra blogu aksatmamayı düşünüyorum.(Hedef; haftada en az 3 yazı girmek.)Neyse asıl konumuza gelelim. jQuery ile kalan karakter uygulaması yapımından bahsedeceğim bu yazıda.Uygulama kullanıcının girebileceği karakter limitini gösterecek ve kullanıcı yazı girdikçe kaç karakter daha girebileceğini görebilecek.Uygulamamız form elementlerinden oluşacak. Öncelikle bunlara stil vermekle başlayalım;

form {

width:300px;
height:auto;
border-radius:5px solid gray;
-webkit-border-radius:5px solid gray;
-moz-border-radius:5px solid gray;
color:black;
font-family:Tahoma;
margin:100px 300px;

}
span {
color:blue;
font-weight:bolder;
text-decoration:line-through;
font-size:20px;
border-bottom:2px solid gray;
width:100px;

}
textarea:focus {
background:#CCFFCC;
}
button
{
border-radius:5px solid gray;
-moz-border-radius:5px solid gray;
-webkit-border-radius:5px solid gray;
color:black;
width:100px;
height:50px;
cursor:pointer;
font-family: Tahoma;
}

#ok {
color:green;
font-family:Tahoma;
font-size:14px;
}

Bu kodlar sayesinde form, textarea, button, span ve ok id’sine sahip elementlerimize stiller atadık. Html kodlarımız ise şöyle;

It’s all about my jquery plugin

Kalan karakter sayısı: 140



Şimdi de uygulamamızın jquery kısmından bahsedelim.

Yukarıda da gördüğünüz gibi öncelikle jquery dosyamızı dahil ediyoruz.Ardından da box id’sine sahip elementte, herhangi bir tuşa basılınca çalışacak fonksiyonumuzu yazıyoruz.Zaten asıl işlemler bu fonksiyonun içinde gerçekleşiyor.Ben uygulamada limit’i 140 olarak belirledim, bu size kalmış bir şey.Sonra da box id’sine sahip elementimizin değerini aldırıp, bu değerin uzunluğunu hesapladık ve bunu entrydeğişkenine atadık.Kullanıcının girmiş olduğu karakter uzunluğu(entry) ile başta belirlemiş olduğumuz limitdeğeri arasındaki farkı aldırarak da sonuc değişkenine atadık.Bu değer kullanıcının kaç karakter daha girebileceğini gösterecek.Son olarak da kullanıcı limit değerini aştıysa ok id’sine sahip elementin colorözelliği red ve butonumuz disabled olacak.Eğer limiti aşıp sonradan silme işlemi gerçekleştirdiyse de özellikler eski haline dönecek.Ve script’imizin en sonunda da ok id’sine sahip dive “kalan karakter sayısını”bastırıyoruz.

NOT: Uygulamanın demosuna buradan, kodlara ise buradan ulaşabilirsiniz.Bu arada “keyup”yerine“keydown” da kullanabilirsiniz.

Bir Cevap Yazın

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