Kode HTML Penghitung Kata dan Karakter



Penghitung Kata dan Karakter Otomatis pada Text Box

Pernah lihat penghitung berapa banyak karakter yang diketikkan seperti pada code editor di  Dokumen-documen?

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.

Artikel Sumber : http://arieweb.net/content/6/1/149/Penghitung-Kata-dan-Karakter-Otomatis-pada-Text-Box.html.html 
betara indra gunawan
betara indra gunawan

Terima kasih Atas Kunjungannya sedang membaca artikel tentang Kode HTML Penghitung Kata dan Karakter di Blog Betara , Sahabat dipersilakan mengcopy paste atau menyebarluaskan artikel ini, Namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya.

Previous
Next Post »

Terima kasih anda telah membaca artikel saya Tinggalkan Komentar anda
EmoticonEmoticon