JavaScript ile Twitter benzeri Karakter Kontrolü

Twitter kullanan herkesin bildiği gibi Twitter'da maksimum 140 karakter sınırlaması bulunmaktadır. Aynı sisteme biz de kendi formlarımızı kodlarken zaman zaman ihtiyaç duyabiliyoruz. Aslında çok da zor olmayan bu işlemi nasıl yapacağımızı beraber inceleyelim.

Önce bir tane textarea nesnesini formumuza aşağıdaki gibi ekliyoruz.

<textarea id="mesaj" rows="5" name="mesaj" onkeyup="mesajKontrol()"></textarea>


Textarea nesnesinin veya diğer form neslerinin onkeyup olayını kullanarak o anda giriş yapılan ifadeyi kontrol etme imkanımız bulunmaktadır. Örneğin bir text nesnesine sadece rakam veya sadece metin girilmesini de daha giriş yaparken kontrol edebilirsiniz. Biz burada girilen metnin uzunluğunu kontrol etmek için onkeyup="mesajKontrol()" şeklinde giriş yapıldığı anda mesajKontrol() fonksiyonunu çağırdık.

function mesajKontrol()
{
var msg = document.getElementById("mesaj").value
    var left = 140 - msg.length;
    document.getElementById("bilgimesaj").innerHTML = left;
}

mesajKontrol() fonksiyonu önce kontrol etmek istediğimiz textarea nesnesinin içeriğini document.getElementByID("mesaj").value ile alıyoruz. Girilen bu değerin uzunluğunu alıp, 140'dan çıkarıyoruz. Daha sonra bilgimesaj isimli span etiketimizin içine "şu kadar karakter kaldı" şeklinde yazdırıyoruz.


Kodun tamamı aşağıdaki gibidir, aşağıdaki mavi kısmı kopyalayıp yapıştırıp, "html" uzantılı olarak kaydediniz ve üzerine tıklayarak çalıştırınız. Kodlamaları genelde sizin yapmanız tavsiye edilir, kopyala-yapıştır işlemini sadece test etmek için kullanınız.

<html>
<head>
 <meta charset="utf-8">
 <script>
function mesajKontrol()
{
var msg = document.getElementById("mesaj").value
    var left = 140 - msg.length;
    document.getElementById("bilgimesaj").innerHTML = left;
}
</script>
 
</head>
<body>
<form>
<label>Mesaj:</label><br/>
<textarea id="mesaj" rows="5" name="mesaj" onkeyup="mesajKontrol()"></textarea>
<div><span id="bilgimesaj">140</span> karakter kaldı.</div>
</form>
 
</body>
</html>

Bir JavaScript örneğimizin daha sonuna geldik, onkeyup() gibi birçok güzel javascript olayını aşağıdaki sunumdan inceleyebilirsiniz.
JavaScript Sunumu (69 Slayt)

Mutlu kodlamalar,
Oğuzhan TAŞ

 
Bookmark and Share
Dil Değiştir(Change Language)