JavaScriptTutorial

Membuat Batas Hitungan Karakter Mirip Twitter dengan JQuery

Membuat Batas Hitungan Karakter Mirip Twitter dengan JQuery
Membuat Batas Hitungan Karakter Mirip Twitter dengan JQuery

Afid Arifin – Halo teman-teman semua, kembali lagi bersama saya yang pada kesempatan kali ini saya akan berbagi tutorial cara membuat batas hitungan karakter mirip seperti di Twitter menggunakan jQuery.

Membuat batasan karakter pada input teks bisa dibilang penting bisa dibilang tidak. Kenapa? pentingnya memberi batasan adalah agar aplikasi yang kita buat dapat terhindar dari spam.

Tidak pentingnya memberi batasan input teks karakter adalah hal ini bisa membuat sebagian pengguna aplikasi kita merasa kesal karena tidak bebas menggunakannya.

Source Code Batas Hitungan Karakter

Untuk memberi batasan input teks seperti twitter, Anda hanya membutuhkan 2 file source code seperti berikut.

Pertama, Silahkan buatlah file dengan nama apa saja dan/atau dalam tutorial ini saya anggap Anda membuat file dengan nama index.html kemudian copy pastekan file html berikut ini.

<!DOCTYPE html>
<html>
  <head>
    <title>Input Text Twitter Style</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="script.js"></script>
    <style>
      .offset {
        transform: translate(350px, 200px);
      }
    </style>
  </head>
  <body>
    <div class="container offset">
      <div class="row">
        <div class="col-md-5 offset-md-6">
          <form role="form">
            <div class="form-group">
              <textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
                <span class="help-block">
                  <p id="characterLeft" class="help-block red">
                    You have reached the limit
                  </p>
                </span> 
            </div>
            <div class="form-group">
              <button type="submit" id="btnSubmit" name="submit" style="margin-top: -31px;" class="btn btn-primary pull-right">
                Publish
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

Kemudian, pada file kedua ini silahkan Anda membuat file baru dengan nama apa saja dan/atau dalam tutorial ini saya anggap Anda membuat file dengan nama script.js lalu copy pastekan file jquery berikut ini.

$(document).ready(function(){ 
  $('#characterLeft').text('140 characters left');
  $('#message').keydown(function () {
    var max = 140;
    var len = $(this).val().length;
    if(len >= max) {
      $('#characterLeft').text('You have reached the limit');
      $('#characterLeft').addClass('red');
      $('#btnSubmit').addClass('disabled');            
    } else {
      var ch = max - len;
      $('#characterLeft').text(ch + ' characters left');
      $('#btnSubmit').removeClass('disabled');
      $('#characterLeft').removeClass('red');            
    }
  });    
});

Bagaimana hasil demonya? Anda dapat melihat hasil demo dari tutorial di atas dapat kalian lihat pada gambar berikut ini.

Membuat Batas Hitungan Karakter Mirip Twitter dengan JQuery

Membuat Batas Hitungan Karakter Mirip Twitter dengan JQuery

Nah, seperti yang sudah saya jelaskan di atas bahwa membuat batasan input karakter memiliki 2 sisi. Penggunaanya dapat Anda sesuaikan sendiri dengan kebutuhan Anda.

You may also like

Leave a reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *