Limit & Count Characters In Text Field - jQuery input_limit

A super easy jQuery solution to limit and count the number of characters typed in a text field (textarea or input).

How to use it:

1. Load the latest jQuery library (slim build is recommended) in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. Check the length of the characters that have been typed and update the character counter on keyup.

$(document).ready(function(){ 
  $('#limit').on('keyup', function() {
    $('#limit_count').html("("+$(this).val().length+" / 200)");
    if($(this).val().length > 140) {
      $(this).val($(this).val().substring(0, 140));
      $('#limit_count').html("(140 / 140)");
    }
  });
});

3. Add the id="limit" attribute to your text fields and done.

<textarea id="limit">
  Text Here
</textarea>
<!-- Character Counter -->
<p id="limit_count">(0 / 140)</p>

Changelog:

2022-05-02

• JS Update

---

This awesome jQuery plugin is developed by delight-HK3. For more Advanced Usages, please check the demo page or visit the official website.