Halo Sobat Sandio! Jumpa lagi bersama kami. Kali ini kami akan membuat percobaan javascript, yaitu pembatasan karakter. Pembatasan yang kami maksud adalah script yang membatasi jumlah karakter yang dapat dimasukkan dalam text area.

Tanpa perlu pengantar panjang-lebar, mari kita laksanakan percobaan ini!

Saatnya beraksi…

Mari kita buat sebuah tampilan form semacam ini:

<form action="">
<table width="445" border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td width="400">
   <textarea id="txt" onkeyup="check()" onmouseout="check()"
   style="width:400px; height:80px;"></textarea>
 </td>
    <td width="71" valign="top" id="left">150</td>
  </tr>
  <tr>
    <td align="right" id="go">
   <input type="submit" value="submit" disabled="disabled" />
 </td>
 <td> </td>
  </tr>
</table>
</form>
Skrip di atas terdiri dari sebuah <form> , <table> , <textarea> , dan submit button.
  • Tag <form> merupakan “wadah” untuk menampung semua masukan yang akan dikirim.
  • Tag <table> digunakan untuk mengatur tata letak element di dalamnya.
  • Tag <textarea> adalah masukan yang digunakan untuk menuliskan teks.
  • Submit button adalah tombol yang memberi perintah pada form untuk mengirim data.

Sebelum kita berlanjut pada pemberian javascript, mari kita perhatikan dengan saksama tiap element pada form di atas.

Pada bagian <textarea>…

   <textarea id="txt" onkeyup="check()" onmouseout="check()"
   style="width:400px; height:80px;"></textarea>

Text area di atas kami beri id txt. Kemudian ada DOM Event onkeyup, berarti setiap tombol di keyboard kita angkat (setelah ditekan) akan menjalankan fungsi check(). Untuk DOM Event onmouseout, fungsi check() akan berjalan jika mouse keluar dari text area. Sedangkan atribut style, seperti Sobat lihat hanya mengatur lebar dan tinggi text area.

  • ID yang diberikan berfungsi bagi javascript untuk mengenali tiap-tiap element yang ada.
  • ONKEYUP kami memilih event ini karena ketika Sobat mengetikkan text, tidak mungkin Sobat tidak mengangkat tombol yang Sobat tekan. Sehingga setiap tombol diangkat, skrip akan mengecek jumlah karakter.
  • ONMOUSEOUT digunakan untuk mengantisipasi user yang melakukan copy-paste menggunakan mouse. Karena menggunakan mouse, meski data yang dimasukkan lebih dari ketentuan, script tidak akan berjalan karena tidak ada tombol di keyboard yang terangkat. Namun dengan event onmouseout, setelah meng-copy-paste pasti mouse akan diarahkan menuju submit button, dan sudah pasti keluar dari text area. Maka script akan menghitung karakter yang ada.

Pada bagian #left…

    <td width="71" valign="top" id="left">150</td>

Merupakan tempat untuk menuliskan jumlah karakter tersisa yang dapat dimasukkan. Angka 150 yang berada di dalamnya merupakan angka awal yang tampil pada saat halaman pertama di-load. Angka disesuaikan dengan jumlah karakter maksimal yang ditentukan dalam javascript.

Pada bagian #go…

 <td align="right" id="go">
   <input type="submit" value="submit" disabled="disabled" />
 </td>

Merupakan tempat untuk meletakkan submit button.
Input button yang ada di dalamnya di-set dalam posisi disabled. Hal ini ditujukan kepada para user yang entah sengaja atau tidak, menyetting browsernya dalam posisi Javascript Disabled. Karena javascript tidak jalan, maka fungsi pembatasan karakter pun berhenti. Dengan posisi awal tombol ter-disabled maka user tidak dapat mengirim data sampai mengaktifkan lagi javascript-nya.

Setelah memahami tiap-tiap element di atas, saatnya menuliskan javascript.

<script>

function check(){

// AMBIL ISI DARI ELEMENT #txt
var x = document.getElementById("txt").value;

// HITUNG JUMLAH KARAKTER PADA VARIABEL X
var y = x.length;

// PENENTUAN JUMLAH KARAKTER MAKSIMAL
var z = 150-y;

// UBAH ANGKA PADA ELEMENT #left
document.getElementById("left").innerHTML=z;

  // JIKA KARAKTER < 0 ATAU = 150 MAKA DISABLE SUBMIT BUTTON
  if((z < 0) || (z==150)){
  var a = '<input type="submit" value="submit" disabled="disabled" />';
  document.getElementById("go").innerHTML=a;
  }

  // JIKA MEMENUHI SYARAT MAKA ENABLE BUTTON
  else {
  var a = '<input type="submit" value="submit" />';
  document.getElementById("go").innerHTML=a;
  }

}

</script>

Perhatikan bagian document.getElementById(). Di sana penentuan id harus sesuai dengan id yang ada pada <form> sebelumnya.

Secara garis besar, cara kerja project kali ini adalah:
  • Menyediakan tampilan default saat halaman di-load.
  • Menjalankan fungsi check() sesuai dengan DOM event.
  • Jika jumlah karakter sesuai, maka tombol ter-enabled.
  • Jika jumlah tidak sesuai, maka tombol ter-disabled.

Hasil dari percobaan di atas adalah: » seperti ini «



[Semoga Bermanfaat]

Artikel ini telah mengalami penyesuaian dari versi terdahulu yang dipublikasikan pada blog Belajar Web dengan judul Pembatasan Karakter pada Textarea.

Pembatasan Karakter pada Textarea
Tagged on:                     

Leave a Reply

Your email address will not be published. Required fields are marked *