Membatasi Jumlah Karakter Pada Textarea


Hai teman, pada artikel kali ini saya akan memberikan tutorial tentang Membatasi jumlah karakter dengan javascript. Nah berikut langkah - langkahnya :

1. Buka software notepad

2. Pada notepad masukan Script berikut


Test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>membatasi Jumlah Karakter | Articles</title>
<script type="text/javascript">
    //Total Karakter
   var maxChar = 2000;
 
   //Fungsi Hitung Textbox
   function itung()
   {
     if (document.formku.deskripsi.value.length > maxChar)
     {
        document.formku.deskripsi.value =  document.formku.deskripsi.value.substring(0, maxChar);
     }
     else  document.formku.hitung.value = maxChar - document.formku.deskripsi.value.length;
   }
  
   //Menampilkan jumlah karakter
   function initial()
   {
      document.formku.hitung.value=maxChar;
    }
</script>
<style>
.pesan{
width:400px;
height:150px;
border:1px solid #999999;
background:#fff;
color:#666;
padding:5px;
margin-top:-1px;
resize:none;
}
.pesan:focus{
border:1px solid #82e2ff;
color:#000;
}

</style>

</head>

<body>
<form name="formku" id="form1" method="post" action="#">
<textarea name="pesan" cols="30" rows="5" class="pesan" id="deskripsi" onkeyup="itung()" placeholder="Pesan Anda .." ></textarea>
       <br />
       Karakter Tersisa
       <input type="text" readonly name="hitung" id="hitung" class="trans1" size="3" disabled="disabled" style="border:none; background:none; color:#000000;"/>
       </form>

</body>
</html>

Simpan file tersebut dengan nama terserah anda.php

Lihat Hasilnya :




Karakter Tersisa

Sumber : http://zooroos.blogspot.com
Selamat Mencoba Dan Semoga Berhasil

Tidak ada komentar:

Posting Komentar