Jumpa lagi dengan saya. Kali ini kita akan membuat project javascript, yaitu character limitation. Mungkin anda masih bertanya-tanya apa itu. Disini yang saya maksud adalah script yang membatasi jumlah karakter yang dapat dimasukkan dalam text area.

Kalo ente masih kagak paham, kayak di twitter itu lhoo.. kan ada angka di samping text area. Kalo karakter yang dimasukkan melebihi jumlah tertentu, ntar tweet kagak kekirim.

Dengan penjelasan di atas tentunya anda sudah mengerti apa yang saya maksudkan--kalaupun belum, ya terserah. Daripada terlalu banyak prolog, mending langsung aja.

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 saya 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 anda lihat hanya mengatur lebar dan tinggi text area.

• ID yang diberikan berfungsi bagi javascript untuk mengenali tiap-tiap element yang ada.
• ONKEYUP saya memilih event ini karena ketika anda mengetikkan text, tidak mungkin anda tidak mengangkat tombol yang anda 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]