Penghitung Kata dan Karakter Otomatis pada Text Box

Jumat, 22 Juli 2011 | 17:06:59

Penghitung Kata dan Karakter Otomatis pada Text Box

Pernah lihat penghitung berapa banyak karakter yang diketikkan seperti pada code editor di WP?

Mungkin code javascript dibawah ini yang anda cari selama ini untuk melengkapi code editor di website Anda.

Script ini berfungsi menghitung berapa banyak kata dan karakter/huruf yang di ketikkan atau yang terdapat didalam text box.

Untuk gampangnya silakan copy dan pastekan code dibawah ini kedalam file editor Anda, letakkan setelah tag <head>.

<style>
* { font-family: tahoma; }
h1 { font-size:20px; }
#counted { font-size:35px; color: #0066CC; }
fieldset { padding: 5px; height: 90%; }
div { margin: 5px; height: 90%; }
</style>
<script language="JavaScript">
function wordcounter(this_field) {
   show_word_count = true;
   show_char_count = false;
   var char_count = this_field.value.length;
   var fullStr = this_field.value + " ";
   var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi;
   var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, "");
   var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9']+/gi;
   var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " ");
   var splitString = cleanedStr.split(" ");
   var word_count = splitString.length -1;
   if (fullStr.length <2) {
   word_count = 0;
   }
   if (word_count == 1) {
   wordOrWords = " Kata";
   }
   else {
   wordOrWords = " Kata";
   }
   if (char_count == 1) {
   charOrChars = " Karakter";
   } else {
   charOrChars = " Karakter";
   }
document.getElementById('counted').innerHTML = "    " + word_count + wordOrWords + "\n" + "    " + char_count + charOrChars;
}
</script>

Kemudian letakkan kode dibawah ini setelah tag<body>.

<h1>Penghitung Kata dan Karakter</h1>
<p><span id="counted"></span></p>
<p><span id="instructions">Letakkan cursor di text box, kemudian ketik atau pastekan beberapa kata.</span></p>
<div style="text-align:center"><textarea onKeyUp="wordcounter(this); document.getElementById('instructions').style.display='none'" onFocus="wordcounter(this); document.getElementById('instructions').style.display='none'" rows="12" cols="90" wrap="virtual" ></textarea></div>

Setelah anda copy file diatas, silakan buka file tadi. Anda juga bisa melihat DEMO nya di sini.

Simpel bukan.?