jquerylogo256_thumb[1] NobleCount… for a more ‘proper’ count of the characters remaining.


A very common requirement with many of the more social products of the various companies I work with is the dynamic display of the number of characters remaining in a textarea, Twitter-style. When implemented, every one of these companies either developed a simple solution in-house or found a re-usable front-end plugin online. Most common, implemented within these products, and of all I could find open-sourced online, were sources lacking customization and/or, almost universally, lacking the desired user experience – updating the character count AFTER all or most of the user’s typing had ceased.

As a result, and also in my quest to always help provide my clients free, cheap and easy to use tools, I have been on the lookout for a jQuery plugin that would provide the ability to …

  • provide non-delayed, real-time character counts,
  • enable easy to customize visual behaviors, and
  • permit event and DOM hooks for the savvy with more advanced character counting needs.

While there are other similar tools out there, none adequately met my goals. Therefore, I created the jQuery NobleCount plugin.


NobleCount is a customizable jQuery plugin for a more improved counting of the remaining characters, and handling of resulting behaviors, of a text entry object, e.g. input textfield, textarea. Also, NobleCount supports pre-existing text within the text object and jQuery chaining.

$('#textfield2').NobleCount('#characters_remaining2', { / * OPTIONS * / });

As text is entered into the target text area, an object for the purpose of tracking the total number of characters remaining, defined as the maximum number of characters minus the current total number of characters within the text entry object, is updated – storing that information visually and/or within the DOM as an HTML 5 compliant data-* attribute.

Events and CSS class alterations, if defined, are triggered based on current user interaction with the target text entry object as well as the current state (positive or negative) of the character remaining value.


	<textarea id='test1'></textarea>
	<span id='count1'></span> characters remaining remaining


To properly initialize, both the text entry object and the object that will store the total number of characters remaining must exist and be passed to NobleCount.


Both TEXT_ENTRY_OBJECT and CHARACTERS_REMAINING_OBJECT must be specified and valid.

Upon successful initialization, all appropriate events and classes are applied to the CHARACTERS_REMAINING_OBJECT, including the storage visually (if not disabled) or only in the DOM (if enabled) of the integer value representing the number of characters remaining.

The target maximum number of characters (max_chars) are determined by the following

precedence rules….

If max_chars passed via constructor
max_chars = max_chars passed
else if number exists within characters_remaining object and number > 0
max_chars = number within the text() of CHARACTERS_REMAINING_OBJECT
else use NobleCount’s default max_chars

Also note that within the NobleCount context…

NEGATIVE is defined as Integers < 0
POSITIVE is defined as Integers >= 0                [on_positive will fire when char_rem == 0]


By default, the maximum number of characters is set to 140 (à la Twitter), a negative number of characters remaining is permitted, and no events, classes, or DOM attribute modifiers are enabled.

To change these settings, they can either be accessed directly…

$.fn.NobleCount.settings.max_chars = 40;

… or at the time of initialization…

$(t_obj).NobleCount(c_obj, {max_chars:100});

The default settings data structure is…

$.fn.NobleCount.settings = {

on_negative: null,
on_positive: null,
on_update: null,
max_chars: 140,
block_negative: false,
cloak: false,
in_dom: false


The parameters are defined (and all can be overridden) thus…


  • class (STRING) or FUNCTION that is applied/called when characters remaining is negative IF DEFINED
  • on_postitive class, if defined, is removed when on_negative event triggers


  • class (STRING) or FUNCTION that is applied/called when characters remaining is positive IF DEFINED
  • on_negative class, if defined, is removed when on_positive event triggers


  • FUNCTION that is called when characters remaining changes


  • target maximum number of characters


  • if TRUE, then all attempts are made to block entering more than max_characters
  • if FALSE [default], text area will let individual entering the text to exceed max_chars limit (characters remaining can become negative)
  • not effective against user pasting in blocks of text that exceed the max_chars value


  • if TRUE, then no visual updates of characters remaining object (c_obj) will occur
  • if FALSE [default], then the text within c_obj is constantly updated to represent the total number of characters remaining until the max_chars limit has been reached
  • note, this does not have any effect on the char_rem value returned via any event callbacks


  • if TRUE and cloak is ALSO TRUE, then the number of characters remaining are stored as the attribute of c_obj named ‘data-noblecount’
  • NOTE: if enabled, due to constant updating of a DOM element attribute, user experience can appear sluggish while the individual is modifying the text entry object (t_obj)

Settings example:

settings =
		on_negative: 'go_red',
		on_positive: 'go_green',
		max_chars: 25,
		on_update: function(t_obj, char_area, c_settings, char_rem){
			if ((char_rem % 10) == 0) {
				char_area.css('font-weight', 'bold');
				char_area.css('font-size', '300%');
			} else {
				char_area.css('font-weight', 'normal');
				char_area.css('font-size', '100%');

Any callback functions assigned to any of the available events are passed the following parameters: (t_obj, char_area, c_settings, char_rem)


  • text entry object


  • characters remaining object


  • result of the options passed into NobleCount at the time of initialization merged with the default options

Having custom function append their own data to c_settings is also a great way to pass in and remember other state information that will be needed upon the triggering of NobleCount events.


  • integer representation of the total number of characters remaining resulting from the calculated difference between the target maximum number of characters and the current number of characters currently within t_obj

Get It

You can download NobleCount, dual licensed under GPL and MIT, from…

jQuery Repository

Public Clone URL: git://



Known Issues

  • None

Release Notes

Version 1.0 – 2010.03.21
Initial release.

If you find this useful, or have any questions, ideas, or issues, leave a comment.


Jeremy Horn
The Product Guy


{ / * OPTIONS * / });


  1. Hi Jeremy,

    In function check_block_negative, I added:

    !e.metaKey &&

    above your:
    !e.ctrlKey &&
    !e.altKey &&

    This prevents the script from blocking keyboard shortcuts on a Mac (using the command key) when the input field has hit the maximum number of allowed characters.



    1. Any way you want. Depends how you are using the Twitter API and the application you are building. You could use this for the text entry field or for whatever other purpose you may devise.


  2. Good plugin, I like the different options you can have for each form field. It would be very useful to fix the issue of users pasting in too much text. 🙂

    Of course any technical user can bypass Javascript controls and we should always do server-side validation, but some regular users may not be aware that they’ve exceeded the limit by pasting too much. Thanks.


    1. Thanks. Yes, pasting is a sticky bit to deal with. A solution is in the works.

      Note that NobleCount supports providing visual cues to the user to inform them that they have exceeded the textarea limits (or any other behavior tied to the number of characters remaining) — beyond the basic counting the the characters, a primary feature. If the user exceeds the max characters you want them to enter you could even have the plugin disable the form submit button or perform some other action to make it super clear that they have “gone too far. ” 😉


  3. Hi, I love this script, the only thing i can’t seem to figure out. I need the Enter/Return key to subject 4 from the count. What could I modify to do this?


          1. I don’t have a link yet.
            But, it’s a textarea that obviously counts -1 for every letter, number, space, etc…
            The only difference is a line break should be -4 instead.
            The API I am using in my PHP counts \n\r as 4 characters, so I need to subject them from the live counter as well.


            1. That’s an interesting twist. To do what you are seeking you would have to modify the internal functions check_block_negative() and find_remaining(). You would have to add an extra value to subtract, being the count of Line Breaks within the string multiplied by 4. I would expect that to definatley slow down the performance of the textarea you are using. BTW, I would also expect the behavior to be uncomfortable to the user using the form. An alternate work-around would be to provide 4x the amount of space within the DB field to accomodate for the worst case scenario (all Line Breaks). 😉

              Let me know if you do make the changes, would love to see how you finally decide to do it.


              1. Unfortunately, it’s not as simple as a DB issue. The data is being sent via an API to a third party system that has very specific rules to the amount of characters that can be used. Think mobile and SMS. I will toy with it and see what i can come up with. Thanks.


  4. Hi,

    Very useful plug-in.

    One question: How could I apply this for all inputs on a given page?

    My problem is selecting the CHARACTERS_REMAINING_OBJECT

    I tried the following

    max_chars: 25,
    on_negative: ‘go_red’,
    on_positive: ‘go_green’,
    block_negative: true

    But obviously it didn’t work.

    Any help appreciated!


    1. You are passing in a jQuery object instead of a string selector for that jQuery object. If you modify your .closest to return the selector to the object that should solve your problem.


      1. Jeremy,
        I need to do this exact same thing but can’t get it to work. Do you have a working example? thanks!


        1. Cruclax, Erik
          maybe this help:

          $(‘input.with-maxlength’).each(function() {
          var counterId = “id_” + Math.random().toString().replace(“.”,””);
          $(this).after(‘ characters remaining’);
          $(this).NobleCount(“#” + counterId, {
          max_chars: 25,
          on_negative: ‘go_red’,
          on_positive: ‘go_green’,
          block_negative: true


    1. Can you provide me with an example of where this didn’t work for you? And OS and Browser used. I did test this on my end to success and would like to dig in if there is a bug.


  5. I don’t see anything in the documentation for targeting the character count element by class instead of id. I think i found a solution, though it’s not very robust. Basically I am looping through the jquery object and sending a selector that targets a specific index to NobleCount. It seems to work okay.

    $j(function() {
    var xyz = ‘.counterspan:eq(‘ + i + ‘)’;
    on_negative: ‘go_red’,
    max_chars: 100

    character(s) left

    thanks for the great plugin!


  6. Hey, I’m fairly new to JS and I’m having some trouble getting this to work just how I need.

    Basically, I’m looking to display a character where the count increases rather than decreases and will continue to increase without limits but once the amount goes over X amount of characters, a span class is applied to the printed count so I can style it differently.

    If that makes sense, I’d really appreciate any help. Thanks!


      1. I am looking to do the same as Dave McNally. I would like for the char_rem to increase instead of decrease when a character is typed. You said there is an example like this on your demo page, but I could not find it. Could you provide a little more detail. Thank you though for this awesome jquery plugin 🙂


      2. I have also looked through the demo page and could not find an example of this. What I am looking for e.g., on a 200-character limit textarea, is to have the sequence go 199/200, 200/200, 201/200 as you approach and then exceed your limit. This would be instead of saying 1 remaining, 0 remaining, -1 remaining, etc.

        Basically, a count of characters entered, not a count of characters remaining. Is there a switch or option we could pass to allow this?

        Thank you!


  7. Thanks for this nice and flexible plugin. I have one suggestion: sometimes it would be nice to be able to call NobleCount() with a c_obj that is a DOM element instead of a selector string. I found that this works in 1.0 if I comment out the “if (typeof c_obj == ‘string’)” portion of your initializer. Voila.

    This is especially useful if you have several field-and-counter combinations on a page, a situation I ran into recently. Instead of giving them all unique IDs, I gave each field a class of “counted_field” and each counter a class of “counter”. The pairs sat near each other in the DOM, so after the slight modification to NobleCount I was able to initialize all the pairs in one shot like this:

    $(“input.counted_field”).each(function(index, el){
    var input = $(el)
    var counter = $(‘.counter’, input.parent());
    if (counter.length) {


    1. What was you modification to the plugin? I need to do the same and have a DOM structure like this:

      Characters left:

      Thanks, Mikael


    2. hey

      yeah i totally agree with you davis!

      in the meantime i’ve amended this line

      if (typeof c_obj == ‘string’) {


      if (typeof c_obj == ‘string’ || typeof c_obj == ‘object’) {

      so that it’s possible to also pass thru jquery objects. i hope this will go into the next release.




    3. Just what I’m looking for. Do you happen to have a more detailled example, because I’m sort of stuck. Thanks!


  8. I want to know if your plugin can update on change?

    I have a textarea that is update by some other js. How can I make the count and restrictions work with the textarea on change.



    1. Yep. Just assign a function call to the on_update event.

      for example….
      settings =
      on_update: function(t_obj, char_area, c_settings, char_rem){


      on_update is trigger on a keydown or keyup event. And if you need to simulate a user modifying the content you can always use jQuery to programmatically throw the key events.

      Hope that helps. Enjoy.


      1. Can you tell me how I would simulate a key-press to update the character count? I have some text boxes that are part of a grid pop-up edit form. I’m able to get NobleCount to run for these when the pop-up appears, but the initial count doesn’t take into account any characters that are already in the text box. If I hit a key, the count updates correctly.

        So I either need to simulate a keypress, or I can pass in the number of characters that are already there and subtract that from the max characters if that’s possible.

        Please note that this behavior only occurs on the pop-up edit form. I have other text boxes that appear on the page load and NobleCount works perfectly counting the existing characters.

        btw…LOVE this script!


          1. AHA!

            It’s running the JQuery event when the object loads, so you’re right, the text probably isn’t in there yet for NobleCount to count it.

            If I add


            just before the JQuery event, it’s able to count the characters. Thanks for the help with that!


  9. What about colors different with red and green? What shell I do, if I want to see yellow color when negative value occured and gray for positive values?


    1. You can make whatever function calls you desire in your implementation. In the example I provide, I use red and green. But you functions can apply other CSS or event logic, bold, large text, etc. The demo page has some more variants you may want to check out.


  10. Here’s a way to prevent extra characters entering the text area during a copy/paste. Change the NobleCount code to this – from line 414 to the end of the else statement:

    // is chararacters remaining positive or negative
    if (char_rem < 0) {
    toggle_states(c_settings.on_negative, c_settings.on_positive, t_obj, char_area, c_settings, char_rem);

    var newstr = ($(t_obj).val()).substring (0, max_char);
    char_rem = 0;

    } else {
    toggle_states(c_settings.on_positive, c_settings.on_negative, t_obj, char_area, c_settings, char_rem);


  11. Great and simple plugin. Love it.

    Is it at all posible to have a max_count be shared between fields so that two fields could have a maximum total of say 60 Characters and as you enter text in one field the second decrements and so on? I am just not sure how to reference the other field’s on_update and then have the max_count be decremented or if I need to just decrement the char count itself.




  12. Jeremy,

    I have two input fields (name and location) that when being displayed will be output onto a single line in a view. The line can take 50 characters. Currently I have a hard limit of 24 characters per field but what would be nice is if in the “name” field someone only entered 20 characters the “location” field could allow 30 characters.

    I don’t know if you’d be able to check the on_update of one field in the settings of another so I could subtract the chars remaining form the max_chars.

    Hopefully that makes some sense.



  13. Personally I think the above is a little bizarre, but nonetheless doable with JS.

    Personally, I’d love to see an ‘enforce_max’ variable, to be the equivalent of:

    on_update: function(t_obj, char_area, c_settings, char_rem){
    if(char_rem < 0) { t_obj.val(t_obj.val().substring(0,c_settings.max_chars)); } }


  14. Is it possible to set the character count using a HTML 5 data-charlength attribute?

    This would make a fine solution as it would allow character counts to be applied site wide e.g $(‘input[data-charlength]’).NobleCount();


  15. Hi Jeremy,

    This looks great, nice bit of coding…although it’s not working for me for some reason.

    I’ve implemented as follows:
    $(document).ready(function() {
    $.fn.NobleCount.settings.max_chars = 1200; $(‘#ctl00_ContentPlaceHolderMain_TextBoxComments’).NobleCount(‘#TextBoxCommentsCounter’);

    The counter appears when the page loads, with 1200 in it as expected, but when I type in the box, nothing happens.

    Probably worth adding the entire page is within an AJAX update panel (MS .Net).

    Any help/advice much appreciated.

    Thanks muchly!


  16. Hi,

    This is a nice plugin, thanks for building it. What I miss in it, however, is to automatically take the maximum length from the standard maxlength attribute. Then I can just add maxlength attributes from PHP and write generic javascript that will setup noblecount on every input/textarea with a maxlength attribute.




    1. Raymond, You can work around this, by rolling your own wrapper. This works for me and “enhances” noblecount in a few ways. You may not like all of them. BTW, prop() is a jquery 1.7 thing, easily converted to attr() instead. I would like to see these features rolled up into noblecount or an official noblecount extension — it would take a little work to make them clean and flexible — Maybe Jeremy or someone else can make this sweet & clean.

      1) It picks up the setting for “maxlength” from the or field and uses it to set max_length
      2) onfocus() it doubles the maxlength and onblur() resets maxllength to the original length, and truncates the field to the origninal maxlength (assuming you allow go_negative). You could focus() the field instead of truncating, but this “breaks” cancel button behaviour.
      3) It dynamically creates the “span” containing the remaining chars counter inside of another span
      4) automatically shows & hides the parent span as you focus() and blur() the enhanced fields. This looks a lot cleaner on a complex data entry form than having lots a nn chars left all over the form.

      // add “enhanced” noblecount to each element with autonoble class tag
      // Permission granted for any legal and ethical use.
      var jo = $(this); // same as traditional $this
      var elength = jo.prop(“maxLength”);
      var autoid = “_auto”+ii;
      jo.after(” “+elength+” chars left”);
      var qdat=$.data(this,”autoid”);
      var qdat=$.data(this,”autoid”);
      var s = qdat.master.val();
      var diddle = s.length > qdat.len;
      if (diddle)
      if (diddle)
      , on_positive: ‘go_green’
      , on_negative: ‘go_red’


  17. Thanks for this!
    I had it working within just a couple of minutes.
    I love that I was able to use my existing HTML/CSS and just plug it in and it worked!
    Some of the other plugins w/similar functionality insert DOM elements via the script, for me that seems weird.
    Anyway, your work is much appreciated and saved me lots of time.



  18. Have you dealt with textareas with large amount of characters? I’m encountering extreme slowdown when I’m trying to limit a text area with NobleCount to around 1500-2000 characters. Specifically, this is inside of a WebControl in a VB.NET application, which I understand is IE7-based, no matter what IE you have installed for regular browser-only usage.


  19. Hi! Nice plugin, but there is a strange problem with input fields that already have a value: The size of the value get’s permanently substracted from the max_chars. Example, an input field has a max. value of 120:
    – When the value is empty display: 120
    – When the value is “12345” display: 110

    Now the later should obviously be 115, but it isn’t. Somebody mentioned something similar above, browser is Firefox 6.0.2 NobleCount v 1.0, jquery 1.6.3

    Best regards, Florian


    1. Alright ignore my post, I found the error. The container had the counter assigned twice, that caused the error. Somebody moved the declarations but forgot to delete the old onces.


  20. I solved the paste problem writing this code at line 303:

    $(t_obj).bind(‘paste’, function(e) {
    setTimeout(function() {
    var text = ”, val = $(t_obj).val();
    if (val.length > max_char) {
    for (var i = 0; i < val.length – 1; i++) {
    text += val[i];
    if (i === max_char) {
    }, 250);


    1. updating my post…

      $(t_obj).bind(‘paste’, function(e) {
      setTimeout(function() {
      var text = ”, val = $(t_obj).val();
      if (val.length > max_char) {
      $(t_obj).val(val.substring(0, max_char));
      }, 250);


  21. I have implemented NobleCount with max_chars, block_negative, on_negative, and on_positive. It works great, mostly. My intent is to prevent typing in characters over max_chars, but to allow pasting in more than that limit, notify the user and allow them to edit. The notification works by the color highlight of the negative count, plus when the user saves the dialog, an alert pops up warning them that the text will be truncated if they do not adjust it.

    That all works fine.

    The very minor flaw is that there are many text elements on the page that can be edited via the dialog widget. If the user pastes in text and gets the red negative highlight, then all the rest of the entry fields on the page also give the red highlight even though they are not over the limit. If the user fixes the over limit field, of course, then all the fields on the page revert to the on_positive color.

    It seems that this is because once the class has changed, it affects all the char count fields that share the same class. However, since the on_negative setting works via a class, I am not sure how to easily correct this.

    The flaw is minor because it would only show up after the following sequence:

    1. User pastes in too much text.
    2. User does not adjust the text to less than the character limit.
    3. User goes in to edit other fields. The character count while positive has the on_negative highlighting.


  22. Actually, it does not work quite fine, as I said in my last post. I get the following warning message:

    Message: Uncaught TypeError: Object [object Object] has no method ‘NobleCount’

    The code is as follows:

    max_chars: maxNoteLen,
    block_negative: true,
    on_negative: ‘go-red’,
    on_positive: ‘go-black’


  23. I added a tidbit i think might be useful in various contexts…
    I needed to limit the text while parsing out dynamic parameters.
    As a simple example, “12345{ignoreme}678” would count as 8 chars.
    The new param is length_fun, and you use it like:
    max_chars: 25,
    on_negative: ‘go_red’,
    on_positive: ‘go_green’,
    block_negative: true,
    length_fun: function(str){
    var thestring = str.replace(/\{[^\}:]*\}/g, “$1”);
    return thestring.length;

    Here is the diff if you want to put it in the next release…

    > length_fun FUNCTION that is called to adjust the interpreted
    > length of the input text
    > length_fun: null // FUNCTION that is called to adjust the interpreted
    > // length of the input text
    < if ((!((find_remaining(t_obj, max_char) if ((!((find_remaining(t_obj, max_char, c_settings) < 1) &&
    < function find_remaining(t_obj, max_char){
    function find_remaining(t_obj, max_char, c_settings){
    > var t_obj_length;
    > if (jQuery.isFunction(c_settings.length_fun)) {
    > t_obj_length = c_settings.length_fun($(t_obj).val());
    > } else {
    > t_obj_length = ($(t_obj).val()).length;
    > }
    > return max_char – t_obj_length;
    var char_rem = find_remaining(t_obj, max_char, c_settings);


  24. This works like a charm, thanks Jeremy! We’ve been using this plugin on ProdPad for a variety of different uses over the last year, and it’s rock solid.

    Is there any way to get this to work on elements that aren’t text box or textarea fields? We’re now getting set up with Redactor, which replaces the textarea with a really nice WYSIWYG – but it means it’s breaking the character counter.

    I suppose it might be tough given that it’ll not be dealing with HTML, not just text, within the element, but wondering if anyone else has tackled this?

    Alternative is this (, but hoping for something a little more elegant.


Comments are closed.

%d bloggers like this: