Counter Text pada Textarea

Posted on by

Hai semua,,, lama juga rasanya tidak posting di blog ini 🙂 . Kehabisan ide buat nuangin kesini, hehe, tapi daripada ndak posting sama sekali di blog ini, kali ini aku posting artikel mengenai bagaimana caranya menghitung jumlah karakter yang kita inputkan pada sebuah textarea menggunakan javascript.

Setiap kali kita mengetikkan karakter atau angka di TextArea, maka fungsi javascript countText() akan selalu menghitung jumlah karakter atau angka yang terisi pada TextArea. Setiap hitungan akan langsung secara otomatis mengisi kolom TextBox (rv_counter) dibawahnya. Pengisian tersebut berupa pengurangan maksimal input keyboard yg didefinisikan dengan variable max = 100 oleh tiap ketikan input keyboard yang kita lakukan. Pada saat jumlah inputan keyboard sama dengan atau lebih besar dari variable max = 100, maka fungsi alert akan ter-eksekusi, namun ini masih berjalan baik pada browser IE & Mozilla, belum aku coba ke browser lainnya contohnya Safari.Untuk source code fungsi javascriptnya bisa kalian lihat di bawah ini :

function countText(){
   var wert,max;
   max  = 100; // batas karakter maksimal
   wert = max-(document.form1.question.value.length); // jumlah
   if (wert < 0) {
      alert("Maaf, batas maksimum pengisian adalah " + max + " karakter !");
      document.form1.question.value = document.form1.question.value.substring(0,max);
      wert = max-(document.form1.question.value.length);
      document.form1.rv_counter.value = wert;
   } else {
      document.form1.rv_counter.value =  max-(document.form1.question.value.length);
   }
}

Untuk implementasinya pada form html silahkan lihat contohnya di bawah ini :

<form method="post" action="">
   <textarea name="test" cols="60" rows="3" id="question" OnFocus="countText();" OnClick="countText();" ONCHANGE="countText();" onKeydown="countText();" onKeyup="countText();" wrap="virtual"></textarea>
   <br>
   sisa <input name="rv_counter" type="TEXT" size="3" maxlength="3" value="100" readonly>
</form>

Sourcecode ini dulu aku dapet dari ilmukomputer.com, semoga bisa bermanfaat buat kita semua suatu saat ya 🙂

Leave a Reply