Twitter-Like Text Box Character Counter with jQuery and Bootstrap

Twitter-Like Text Box Character Counter with jQuery and Bootstrap
File Size: 3.93 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

In this tutorial we're going to create a twitter-like text box that displays the remaining characters count as well as limiting the max length of input text, by using jQuery Character Counter plugin and Bootstrap 3. The plugin also has the ability to limit the maximum length of the text box where the user is inserting text.

See also:

How to use it:

1. Include jQuery javascript library and jQuery Character Counter plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.charactercounter.js"></script> 

2. Include Twitter's bootstrap 3 framework in the page. (Not required but recommended.)

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

3. Create a standard textarea on your web page.

<form>
<textarea rows="8" class="form-control" id="demo"></textarea>
<button type="submit" class="btn btn-info">Submit</button>
</form>

4. Call the plugin on this textarea and you're done.

<script>
$(function(){
$("#demo").characterCounter({
counterCssClass: 'help-block',
});
});
</script>

5. Customization.

$(function(){
$("#demo").characterCounter({

exceeded: false,
renderTotal: false,
increaseCounting: false,

// characters limit
limit: 150, 

// allow one or more counters to be specified by a jQuery selector
counterSelector: false, 

// the element you wish to wrap your counter in.
counterWrapper: 'span', 

// the CSS class to apply to your counter.
counterCssClass: 'help-block', 

// the format of your counter text where '%1' will be replaced with the remaining character count.
counterFormat: 'Characters Remaining: %1', 

// the CSS class to apply when your limit has been exceeded.
counterExceededCssClass: 'exceeded', 

// this function is called when the limit is breached
onExceed: function(count) {},

this function is called when the limit, having previously been exceeded, is now deceeded
onDeceed: function(count) {},

// key value pairs of custom options to be added to the counter such as class, data attributes etc.
customFields: {}

}); 
});

Change logs:

2015-07-29

  • add IE8 support

2015-06-21

  • Updating counter to listen for input and change events

2015-03-23

  • Using .siblings() instead of next()

2015-02-17

  • Parse HTML5 attributes for max length

2014-01-24

  • counterSelector option to allow one or more counters to be specified by a jQuery selector

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