Pembatasan Karakter Pada Form Komentar

Kunciku.com – Singkat kata, singkat cerita artikel ini merupakan salah satu request dari teman kita Si Rizky pada bulan kemarin, hampir satu bulan lho, mohon maaf banget yah, harap maklum masih agak sibuk nih. Yups langsung saja simakin Artikel tentang Pembatasan Karakter Pada Form Komentar, atau Hitung Jumlah karakter pada form Komentar. Sebenarnya bisa juga untuk mengitung/membatasi jumlah karakter pada semua inputan. Tapi artikel ini hanya membahas input pada form komentar aja.

Pembatasan Karakter Pada Form Komentar :

1. Buka notepad anda atau teks editor lainnya, buat sebuah file html sederhana, simpan dengan nama terserah anda, contoh: form.html

2. Buat lah tag-tag dasar html, seperti tag html, head, title, dan body, jangan lupa tag penutupnya.

3. Sisipkan Java Script Berikut diatas tag (/head)

<script language="javascript">

function textCounter(field,cntfield,maxlimit) {

if (field.value.length > maxlimit) // if too long...trim it!

field.value = field.value.substring(0, maxlimit);

// otherwise, update 'characters left' counter

else

cntfield.value = maxlimit - field.value.length;

}

function stripCharsInBag(s, bag)

{   var i;

    var returnString = "";

    // Search through string's characters one by one.

    // If character is not in bag, append to returnString.

    for (i = 0; i < s.length; i++)

    {  

        // Check that current character isn't whitespace.

        var c = s.charAt(i);

        if (bag.indexOf(c) == -1) returnString += c;

    }

    return returnString;

}

</script>

4. Buat Form Komentar sesuai kreasi anda. Dalam hal ini kita hanya membuat 2 tag, yakni tag input & text area.

Berikut tag html form komentarnya:

<center><b>Membuat Pembatasan Karakter Pada Form Komentar</b></center><br />

<table width="30%" style="border: 1pt solid #000000;padding: 10px;" align="center">

<form name="form" action="" method="POST">

<tr><td>Nama</td><td> <input type=text name=nama_komentar size=40 maxlength=50></td></tr>

<tr><td valign=top>Komentar</td><td>

<textarea name='isi_komentar' style='width: 300px; height: 100px;' onKeyDown= 'textCounter(document.form.isi_komentar,document.form.remainchars,500)' onKeyUp= 'textCounter(document.form.isi_komentar,document.form.remainchars,500)'></textarea></td></tr>

<tr><td>&nbsp;</td>

<td><input readonly type='text' name='remainchars' size='3' maxlength='3' value='500'> Karakter yang masih tersedia.</td></tr>

<tr><td>&nbsp;</td><td><input style='border: 1px solid rgb(0, 0, 0); color: rgb(0, 0, 0); background-color: rgb(255,255,255);' type=submit name=submit value=Kirim></td></tr>

</form></table>

OK File html beserta Form Komentar telah selesai kita buat, sekarang kita lanjut dengan penjelasan pembatasan karakter pada form komentar .

Pembatasan Karakter Pada Form Komentar.

function textCounter(field,cntfield,maxlimit) {

if (field.value.length > maxlimit) // if too long...trim it!

field.value = field.value.substring(0, maxlimit);

// otherwise, update 'characters left' counter

else

cntfield.value = maxlimit - field.value.length;

}

function stripCharsInBag(s, bag)

{   var i;

    var returnString = "";

    // Search through string's characters one by one.

    // If character is not in bag, append to returnString.

    for (i = 0; i < s.length; i++)

    {  

        // Check that current character isn't whitespace.

        var c = s.charAt(i);

        if (bag.indexOf(c) == -1) returnString += c;

    }

    return returnString;

}

Fungsi diatas adalah untuk membuat pembatasan karakter, dimana jika jumlah karakter yang kita gunakan lebih dari jumlah karakter yang tersedia maka form komentar tidak bisa diisi dengan karakter lainnya.

Sekarang kita lihat tabel komentar.

Ingat disini kita hanya menampilkan jumlah karakter saja bukan untuk pengiriman isi komentar.

Pada tag textarea, coba perhatikan:

onKeyDown= 'textCounter(document.form.isi_komentar,document.form.remainchars,500)' dan onKeyUp= 'textCounter(document.form.isi_komentar,document.form.remainchars,500)'

fungsi diatas adalah untuk menentukan limit karakter atau batasan karakter yang tersedia dan dihitung mundur, contoh diatas adalah dengan batasan 500 karakter.

Rumusnya :

onKeyDown='textCounter(document.nama_form.nama_field,document.form.remainchars,jumlah_limit)'

onKeyUp='textCounter(document.nama_form.nama_field,document.form.remainchars,jumlah_limit)'

Lalu perhatikan juga pada baris:

input readonly type='text' name='remainchars' size='3' maxlength='3' value='500'

Baris diatas berfungsi untuk menampilkan jumlah karakter yang tersedia, karena hanya berfungsi untuk menampilkan jumlah karakter saja, maka kita tambahkan readonly, sehingga user tidak dapat menghapus isi teks tersebut.

Yups selesai sudah artikel tentang Pembatasan Karakter Pada Form Komentar, anda bisa berkreasi sesuai dengan imajenasi anda, bisa juga anda tambahkan validasi dan sebagainya. Oh ya artikel ini masih sangat sederhana dan jauh dari kesempurnaan, kritik yang membangun sangat kita harapkan demi kecerdasan anak Bangsa.

Selamat Mencoba.

Untuk Demo silahkan lihahkan lihat pada form komentar dibawah.

• Article Management System (AMS)
• SMS Online Gratis All Operator
• Mana Duluan, Ayam atau Telur? Ini Jawabnya!
• PTC 2010 Terbukti Membayar
• Program Penghasil Dolar Pay Per Ref Terbaru Juli 2010 $2/Reff
• Cara Membuat Banner Tanpa Software Dengan Cepat dan Mudah