Cara Membuat Textarea Dengan Character Count Dan Limit

Cara Membuat Textarea Dengan Character Count Dan Limit - Textarea adalah sebuah komponen dari HTML yang digunakan untuk mengetikan atau menginput text yang biasanya panjang. Pada dasarnya fungsi textarea sama dengan text field yaitu untuk menginput karakter tapi textarea lebih ditujukan untuk ke arah jumlah karakter yang lebih banyak karena bentuk field text area yang luas atau lebih besar dibandingkan dengan text field.

Baca Juga : Cara Membuat Form Pada HTML

Textarea sering digunakan untuk menginput text yang panjang seperti artikel, akan tetapi dalam beberapa kasus terkadang jumlah karakter yang dimasukan kedalam textarea di batasi, contohnya seperti dalam tweeter kita hanya dapat memasukan 140 karakter. Nah, Bagaimana sih sebenarnya membuat limitasi karakter pada textarea ?

Jika kita ingin membatasi karakter yang di inputkan kita dapat menggunakan atribut dari textarea tersebut yaitu maxlength anda cukup menambahkan maxlength="140" sebagai contoh :

<textarea maxlength="140" placeholder="Enter Your Text Here"></textarea>

Akan tetapi jika hannya menggunakan cara di atas kita hanya membatasi jumlah karakter yang masuk tapi tidak mengetahui jumlah karakter yang sudah di masukan. Sekarang bagaimana kita mengetahui jumlah karakter yang sudah dimasukan yaitu dengan menambahkan javascript. Untuk lebih jelasnya langsung saja meluncur ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Textarea, sekarang untuk mempercantik bentuk tampilan textarea buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic);
*, *:before, *:after { box-sizing: border-box; }
html { font-size: 100%;  }
body { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background: #0172c6;
  color: #fff;
}

.wrapper {
  max-width: 65%;
  margin: auto;
}


h2 { 
  color: #fff;  
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  display: block;
  text-align: Center;
}

h1 { 
  color: #fff; 
  margin: 3rem 0 1rem 0; 
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: block;
  text-align: Center;
}

textarea {
  width: 100%;
  min-height: 100px;
  resize: none;
  border: 1px solid #ddd;
  outline: none;
  padding: 0.5rem;
  color: #666;
  box-shadow: inset 0 0 0.25rem #ddd;
  &:focus {
    outline: none;
    border: 1px solid darken(#ddd, 5%);
    box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
  }
  &[placeholder] { 
    font-style: italic;
    font-size: 0.875rem;
  }
}

#the-count {
  float: right;
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}
</style>

Simpan dalam folder Textarea dengan nama style.css

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
  <title>Textarea Character Count | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet">   
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Textarea Character Count</h2>
    <textarea name="the-textarea" id="the-textarea" maxlength="140" placeholder="Enter Your Text Here"></textarea>
    <div id="the-count">
   <span id="current">0</span>
   <span id="maximum">/ 140</span>
    </div>
  </div> 
 </body>
</html>

Simpan dalam folder Textarea dengan nama index.html

Javascript

Sekarang untuk counter kita tambahkan javascript di dalam markup HTMLnya, buka file Index.hml anda di Notepad++ kemudian ubah scriptnya menjadi :

<!DOCTYPE html>
<html>
 <head>
  <title>Textarea Character Count | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet"> 
  <script src="jquery.min.js"></script>
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Textarea Character Count</h2>
    <textarea name="the-textarea" id="the-textarea" maxlength="140" placeholder="Enter Your Text Here"></textarea>
    <div id="the-count">
   <span id="current">0</span>
   <span id="maximum">/ 140</span>
    </div>
  </div> 
  <script>
   $('textarea').keyup(function() {   
     var characterCount = $(this).val().length,
      current = $('#current'),
      maximum = $('#maximum'),
      theCount = $('#the-count');
    
     current.text(characterCount);
      
     if (characterCount == 140) {
    maximum.css('color', '#8f0001');
    current.css('color', '#8f0001');
    theCount.css('font-weight','bold');
     } else {
    maximum.css('color','#fff');
    theCount.css('font-weight','normal');
     }
     
      
   });
  </script>
 </body>
</html>

Kemudian simpan.

Jika kalian perhatikan script di atas maka terlihat javascript tambahan di bagian bawah dan jquery di bagian atas. Untuk jquery anda dapat menggambilnya di website resminya atau anda dapat mengunduhnya di sini : Download

Sekarang Textarea Character Count anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD