Counter Text pada Textarea


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๐Ÿ™‚

Mari Berdiskusi Bersama

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s