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>

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/>