Ide Membuat Pembatasan Jumlah Karakter Pada Form dengan Counter
May 14th, 2009 | by rosihanari |
Cetak Artikel
Ada seorang member saya, mas Sarjito, menanyakan bisakah membuat script untuk membatasi jumlah karakter yang diinputkan pada sebuah form sebelum input tersebut disubmit. Jawabannya adalah bisa mas Jito, yaitu menggunakan Javascript.
Ide konsepnya adalah mirip seperti kita mengirim SMS via handphone.
Sebagai contoh misalkan kita batasi jumlah karakter yang bisa diinputkan adalah 250 buah. Supaya informatif, sebaiknya dalam form terdapat semacam counter yang menunjukkan berapa karakter lagi yang bisa dituliskan. Karena kita batasi jumlah karakternya ada 250, maka nilai awal counternya adalah 250. Setiap kali kita mengetikkan karakter pada form tersebut, jumlah karakter tersebut akan terus berkurang sampai dengan 0 yang artinya karakter tidak bisa ditambah lagi.
Bagaimana cara membuatnya? simak artikel menarik berikut ini.
Dalam pembahasan ini, kita gunakan sebuah textarea yang ada dalam form. Textarea mampu menampung text input dalam jumlah banyak.
Trus… ya.. kita langsung mulai saja membuatnya. Pertama kita siapkan terlebih dahulu form yang di dalamnya terdapat textarea.
<html> <head> </head> <body> <form name="formku" method="post" action="..."> <textarea name="pesan" rows="8" cols="30" /></textarea><br /> <input type="submit" name="submit" value="Submit"> </form> </body> </html>
Perhatikan, form kita beri nama ‘formku’ dan textareanya kita beri nama ‘pesan’. Nama-nama komponen tersebut perlu dicatat karena nantinya akan digunakan untuk membuat acuan dalam Javascriptnya. Oya… nanti kita akan gunakan Javascript DOM untuk implementasinya.
Oya.. perlu juga kita tambahkan sebuah textbox untuk menampilkan jumlah karakter yang tersisa dari jumlah maksimal karakter yang diperbolehkan. Sebaiknya textbox ini kita tampilkan secara ‘readonly’ (tidak bisa diedit)
<html> <head> </head> <body> <form name="formku" method="post" action="..."> <textarea name="pesan" rows="8" cols="30" /></textarea><br /> <input type="text" readonly name="counter" size="3" /><br /><br /> <input type="submit" name="submit" value="Submit"> </form> </body> </html>
Nah… selanjutnya, karena jumlah maksimum karakter yang bisa diinputkan adalah 250, maka kita perlu membuat inisialisasi pada textbox untuk counternya yang berisi 250. Proses inisialisasi ini terjadi ketika proses loading pertama kali atau ‘onload‘. Oleh karena itu dalam <body> perlu kita tambahkan event ‘onload‘ yang kemudian kita arahkan ke function Javascript untuk proses inisialisasi tersebut.
<html>
<head>
<script type="text/javascript">
var maxChar = 250;
function initial()
{
document.formku.counter.value = maxChar;
}
</script>
</head>
<body onload="initial()">
<form name="formku" method="post" action="...">
<textarea name="pesan" rows="8" cols="30" /></textarea><br />
<input type="text" readonly name="counter" size="3" /><br /><br />
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Keterangan:
Perintah document.formku.counter.value = maxChar; digunakan untuk mengisi value pada komponen bernama ‘counter’ yang terletak dalam form bernama ‘formku’.
Selanjutnya, bagaimana supaya counter jumlah karakter tersebut bisa berkurang secara otomatis setiap kali kita menulis karakter pada textarea? Caranya adalah kita berikan event ‘onKeyUp‘ pada textarea tersebut. Event tersebut nantinya akan memanggil suatu function tertentu.
Trus… function tersebut isinya bagaimana? Idenya sederhana.. Misalkan kita batasi jumlah karakter maksimumnya adalah 250. Apabila kita ketikkan sebuah karakter, maka sisa karakternya adalah 249 (250 – 1), selanjutnya bila kita tulis sebuah karakter lagi (sekarang terdapat 2 karakter), maka sisa karakternya adalah 248 (250 – 2), begitu seterusnya. Sehingga di sini kita perlu mencari cara bagaimana supaya script membaca panjang karakter yang sudah dituliskan dalam textarea supaya bisa dihitung jumlah karakter sisanya yang dirumuskan: max karakter – panjang karakter.
Nah… caranya untuk membaca panjang karakter yang telah diinputkan dalam textarea, kita gunakan perintah
document.formku.pesan.value.length;
Sehingga kita bisa buat Javascriptnya seperti di bawah ini
<html>
<head>
<script type="text/javascript">
var maxChar = 250;
function initial()
{
document.formku.counter.value = maxChar;
}
function count()
{
document.formku.counter.value = maxChar - document.formku.pesan.value.length;
}
</script>
</head>
<body onload="initial()">
<form name="formku" method="post" action="...">
<textarea name="pesan" rows="8" cols="30" onKeyUp="count()" /></textarea><br />
<input type="text" readonly name="counter" size="3" /><br /><br />
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
Anda bisa mencoba script di atas terlebih dahulu. Apabila Anda coba, maka akan tampak jumlah counternya akan berkurang setiap kali kita ketikkan suatu karakter. Lihat gambar berikut ini
Namun… apa yang terjadi bila kita terus ketikkan sampai dengan melebihi jumlah karakter maksimum (panjang karakter > 250)? He… 3x belum ada handle sama sekali, anda akan bisa terus menambahkan karakter sehingga jumlah karakter yang tersisa menjadi minus 
Perhatikan screen shot di bawah ini
Trus… bagaimana donk… ya kalau begitu kita harus menghandle seandainya panjang karakternya sudah melebihi maksimum karakter yang diperbolehkan. Sehingga di sini kita menggunakan syarat IF. Jika panjang karakter yang telah diinputkan melebihi maksimum karakter (250), maka karakter yang dianggap valid adalah karakter sejumlah 250 yang dihitung mulai dari karakter awal (karakter ke-0). Dengan demikian kita harus modifikasi script terutama pada function count() menjadi seperti di bawah ini:
function count()
{
if (document.formku.pesan.value.length > maxChar)
{
document.formku.pesan.value = document.formku.pesan.value.substring(0, maxChar);
}
else document.formku.counter.value = maxChar - document.formku.pesan.value.length;
}
Keterangan:
Perintah document.formku.pesan.value.substring(0, maxChar); digunakan untuk membaca substring dari textarea sejumlah 250 karakter yang dihitung mulai dari karakter awal (karakter ke-0).
Nah… dengan demikian script keseluruhan menjadi
<html>
<head>
<script type="text/javascript">
var maxChar = 250;
function count()
{
if (document.formku.pesan.value.length > maxChar)
{
document.formku.pesan.value = document.formku.pesan.value.substring(0, maxChar);
}
else document.formku.counter.value = maxChar - document.formku.pesan.value.length;
}
function initial()
{
document.formku.counter.value = maxChar;
}
</script>
</head>
<body onload="initial()">
<form name="formku" method="post" action="...">
<textarea name="pesan" rows="8" cols="30" onKeyUp="count()" /></textarea><br />
<input type="text" readonly name="counter" size="3" /><br /><br />
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
He… 3x jadi deh, persis kayak di SMS handphone bukan? OK deh selamat mencoba dan mudah-mudahan ada manfaatnya.
Programming is fun, isn’t?
| Baca Juga Artikel Terkait |
Kata kunci: counter - Javascript -
gimana kalo javascriptnya di-non aktifkan pak
to mashardi: no comments about that..
terima kasih mas.. free ebook.. mencerdaskan bangsa indonesia… sukses buat blog ini..
kaya nya bisa koq di atasi kl di non aktifkan.
cuman ide aja ini, kl bertele2 dibenarkan jg boleh.
buat textarea nya di disable (brrt mau js nya aktif gak aktif ttp disable), trs buat countdown 1sec aj untuk non aktifin disable nya. trs baru deh bisa ngisi.
hehe… just idea…
oh iy kl gak buat aturan yang pake script sama buat aturan yang pake nonscript.
iy lupa kl misalkan tanpa refresh trus di matiin js nya.
to pandora: kalo JS nya dimatiin, ya.. satu-satunya solusi verifikasi jumlah karakternya dilakukan di server side scriptnya.
mas ijin nyimak dan bookmark selalu blognya. thx banget ilmu2nya..
gimana kalau dibalik kang…
kita beri minimal 10 karakter utk komentar..
so kalau ada yang komentar spam, contoh nice gan itu tidak bisa di load…
mohon dibales ya
mas, klo buat textarea dinamis
jadi ad 3 textarea
anggap text area
1.tempat-tempat yang pernah di kunjungi
2.kesan di tempat-tempat tersebut
nah setelah user mengisi textarea tersebut, otomatis di text area yang ketiga isinya textarea yang pertama dimulai saat di ketik dan di tambah textarea yang kedua.
satu lagi mas, gmna klo textareanya lebih dari stu dalam satu form,
klo setiap textarea mesti satu fungsi kyanya kurang efektif.
trimakasih buat Rosihan Ari’s…..
saya bangga bnget dengan karya-2 nya….. tutornya bermanfaat skali…..
Mas,kalau saya mau mengijinkan user untuk memasukan karakter dengan jumlah sesuka mereka namun ketika ditampilkan pada halaman web hanya terlihat beberapa karakter saja, gimana tuh.
@andi: gunakan function substr() di PHP untuk mengambil substring dengan panjang n karakter dari suatu string untuk ditampilkan di web.