Our Blog

What we post and publish is awesome!

Membatasi Jumlah Karakter pada Textarea

Membatasi Jumlah Karakter pada Textarea

Membatasi Jumlah Karakter pada Textarea

jQuery – Membatasi Jumlah Karakter pada Textarea

Untuk suatu alasan kita perlu membatasi kareakter yang diinputkan oleh user atau pengunjung pada textarea. Misalnya pada shoutbox, sehingga pesannya yang muncul tidak terlalu panjang. Di bawah textarea akan ditampilkan karakter yang tersisa untuk bisa diinputkan. Lihat contoh berikut:

Maksimal 150 karakter

Source Code

<!DOCTYPE html>
<html>
<head>
<title>Limit Textarea</title>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $("#message").keyup(function(){
   if(this.value.length>150){
    this.value=this.value.substring(0,150);
   }
   $("#remaining").text("Karakter tersisa : " + (150-this.value.length));
    })
  })
</script>
</head>

<body>
<textarea cols="30" id="message" rows="8" >Tulis pesan di sini</textarea>
<p id="remaining">Maksimal 150 karakter</p>
</body>
</html>

Pertama kita cek apakah value dari textarea lebih besar dari 150, gunakan event keyup. Bila lebih maka kita ambil 150 karakter saja dengan fungsi substring(awal, jumlah). Terakhir kita tampilkan karakter tersisa pada tag p dengan id remaining.