About Me

Hai, saya Rosihan Ari Yuana. Saya sehari-hari adalah mengajar di Universitas Sebelas Maret.

Bidang riset saya tentang adaptive learning, computer aided learning, dan datascience

Selain itu, saya juga seorang penulis buku dan blogger.

More about me...

  • Home
  • /
  • Javascript
  • /
  • Ide Membuat Pembatasan Jumlah Karakter Pada Form dengan Counter

Ide Membuat Pembatasan Jumlah Karakter Pada Form dengan Counter

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

<br>
document.formku.pesan.value.length;</p>
<p>

Sehingga kita bisa buat Javascriptnya seperti di bawah ini

</p>


<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>


  <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>



<p>

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

Photobucket

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

Photobucket

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:

<br>
function count()<br>
{<br>
  if (document.formku.pesan.value.length &gt; maxChar)<br>
  {<br>
     document.formku.pesan.value =  document.formku.pesan.value.substring(0, maxChar);<br>
  }<br>
  else document.formku.counter.value = maxChar - document.formku.pesan.value.length;<br>
}</p>
<p>

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

</p>


<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>


  <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>



<p>

He… 3x jadi deh, persis kayak di SMS handphone bukan? OK deh selamat mencoba dan mudah-mudahan ada manfaatnya.

Programming is fun, isn’t?

 

0
Bagikan artikel ini jika bermanfaat !

Saya seorang dosen dan peneliti di Universitas Sebelas Maret. Bidang penelitian saya tentang: adaptive learning, datascience, dan computer aided learning. Selain itu saya juga seorang blogger, serta penulis buku tentang pemrograman, dan matematika.

Leave a Reply