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.
01.<html>02.<head>03.head>04.<body>05.<form name="formku" method="post" action="...">06.<textarea name="pesan" rows="8" cols="30" />textarea><br />07.<input type="submit" name="submit" value="Submit">08.form>09.body>10.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)
01.<html>02.<head>03.head>04.<body>05.<form name="formku" method="post" action="...">06.<textarea name="pesan" rows="8" cols="30" />textarea><br />07.<input type="text" readonly name="counter" size="3" /><br /><br />08.<input type="submit" name="submit" value="Submit">09.form>10.body>11.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 perlu kita tambahkan event ‘onload‘ yang kemudian kita arahkan ke function Javascript untuk proses inisialisasi tersebut.
01.<html>
02.<head>
03.<script type="text/javascript">
04.var maxChar = 250;
05.
06.function initial()
07.{
08.document.formku.counter.value = maxChar;
09.}
10.
11.script>12.head>13.<body onload="initial()">14.<form name="formku" method="post" action="...">15.<textarea name="pesan" rows="8" cols="30" />textarea><br />16.<input type="text" readonly name="counter" size="3" /><br /><br />17.<input type="submit" name="submit" value="Submit">18.form>19.body>20.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
1.document.formku.pesan.value.length;
Sehingga kita bisa buat Javascriptnya seperti di bawah ini
01.<html>
02.<head>
03.<script type="text/javascript">
04.var maxChar = 250;
05.
06.function initial()
07.{
08.document.formku.counter.value = maxChar;
09.}
10.
11.function count()
12.{
13.document.formku.counter.value = maxChar - document.formku.pesan.value.length;
14.}
15.
16.script>17.head>18.<body onload="initial()">19.<form name="formku" method="post" action="...">20.<textarea name="pesan" rows="8" cols="30" onKeyUp="count()" />textarea><br />21.<input type="text" readonly name="counter" size="3" /><br /><br />22.<input type="submit" name="submit" value="Submit">23.form>24.body>25.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:
1.function count()
2.{
3.if (document.formku.pesan.value.length > maxChar)
4.{
5.document.formku.pesan.value = document.formku.pesan.value.substring(0, maxChar);
6.}
7.else document.formku.counter.value = maxChar - document.formku.pesan.value.length;
8.}
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
01.<html>
02.<head>
03.<script type="text/javascript">
04.
05.var maxChar = 250;
06.
07.function count()
08.{
09.if (document.formku.pesan.value.length > maxChar)
10.{
11.document.formku.pesan.value = document.formku.pesan.value.substring(0, maxChar);
12.}
13.else document.formku.counter.value = maxChar - document.formku.pesan.value.length;
14.}
15.
16.function initial()
17.{
18.document.formku.counter.value = maxChar;
19.}
20.
21.script>22.head>23.<body onload="initial()">24.<form name="formku" method="post" action="...">25.<textarea name="pesan" rows="8" cols="30" onKeyUp="count()" />textarea><br />26.<input type="text" readonly name="counter" size="3" /><br /><br />27.<input type="submit" name="submit" value="Submit">28.form>29.body>30.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?
EmoticonEmoticon