Limit The Number Of Characters In Text Fields - jQuery limitText.js

File Size: 7.35 KB
Views Total: 7435
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Limit The Number Of Characters In Text Fields - jQuery limitText.js

limitText.js is a small (2kb minified) jQuery plugin that limits the number of characters allowed in your text fields and automatically creates counters to display how many characters remaining. Compatible with Bootstrap framework. Supports both input field and textarea.

How to use it:

1. Create a character counter container on the web page.

<div id="counter"></div>

2. Associate your text field with the character counter using the data-status-message attribute:

<textarea id="example" 
          data-status-message="#counter">
</textarea>

3. Place jQuery library and the jQuery limitText.js at the bottom of your page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.limitText.js"></script>

4. Invoke the plugin with default settings.

$(document).ready(function () {
  $('#example').limitText();
});

5. Specify the maximum number of characters allowed in the text field.

$('#example').limitText({
  limit: 140, // default: 200
});

6. Specify the remaining character count to trigger class change.

$('#example').limitText({
  warningLimit: 50 // default: 10
});

7. Specify the CSS classes applied to the status area. These two are Bootstrap text emphasis classes that you can override in the config, or roll your own of the same name

$('#example').limitText({
  counterClass: 'text-primary',
  warningClass: 'text-danger',
});

8. Specify the selector for the status message.

$('#example').limitText({

  // A jQuery selector to id an existing status container DOM element. 
  // If left empty, a default will be added after the element.
  statusMessage: ''
  
});

9. Specify the selector and class of the status container. Note that the default container element is only used if an xisting container (statusMessage) is not defined.

$('#example').limitText({

  // DOM element to be inserted if statusMessage is undefined
  containerElement: '<div>',

  // Class applied to the status container. 
  containerClass: 'limit-text-status'

});

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