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)
JavaScript ile CSS kodlarını Yönlendirme
JavaScript ile Zemin Rengini Değiştirme
JavaScript ile Metin Kutusu değerini artırmak ve azaltmak
JavaScript ile Form Kontrolü
JavaScript ile Döngüler
JavaScript ile Fonksiyon İşlemleri
JavaScript ile Harf ve Rakam Kontrolü
JavaScript ile Basit Hesaplatma İşlemleri
JavaScript ile Ortalama ve Harf Notu Hesaplama
JavaScript ile Twitter benzeri karakter kontrolü

JavaScript ile Yuvarlatma Hatası nasıl düzeltilir?
JavaScript Luhn Algoritması ile Kredi Kartı Doğrulama


Mutlu kodlamalar,
Oğuzhan TAŞ

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