NobleCount

81 comments

1. Pingback: jQuery Plugin: Give Your Characters a NobleCount « The Product Guy
2. Pingback: links for 2010-03-26 « Mandarine

3. 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.

   Thanks,
   Broen

   LikeLike

   1. Thanks I will check it out.

      LikeLike

4. Any way to prevent pasting of additional characters after the limit is hit?

   LikeLike

   1. Not at the moment, but I am exploring solutions & open to suggestions / ideas.

      LikeLike

      1. Here, do it like this:
         http://jsfiddle.net/JQjPE/

         LikeLike

5. How can I integrate this with Twitter API?

   LikeLike

   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.

      LikeLike

6. 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.

   LikeLike

   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. ” 😉

      LikeLike

7. 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?

   LikeLike

   1. “subject”?

      LikeLike

      1. I meant for that to say “subtract”. Sorry.

         LikeLike

         1. Could you provide me with a link to an example of what you are trying to accomplish that I can check out?

            LikeLike

            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.

               LikeLike

               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.

                  LikeLike

                  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.

                     LikeLike

         2. Jeremy, here’s what I did that handles the double chars for newlines. It adds a 1 to the count for each occurrence of a carriage return.

            function find_remaining(t_obj, max_char) {
            var jLength = ($(t_obj).val()).length;
            var realLength = jLength + ($(t_obj).val().split(/\n/g).length-1)
            return max_char – realLength;
            }

            Thanks to this page:
            http://p2p.wrox.com/javascript-how/70527-count-occurrence-character-string.html

            LikeLike

8. How would a n00b like me go about adding in the ability to disable the submit buttons on a page if the count goes above my limit?

   LikeLike

9. 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

   $(‘input:text’).NobleCount($(this).closest(‘.char_countdown’),{
   max_chars: 25,
   on_negative: ‘go_red’,
   on_positive: ‘go_green’,
   block_negative: true
   });
   });

   But obviously it didn’t work.

   Any help appreciated!

   LikeLike

   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.

      LikeLike

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

         LikeLike

         1. The NobleCount details can be found at https://tpgblog.com/noblecount

            The NobleCount demo and examples can be found at http://theproductguy.com/noblecount/noblecount.demo.html (also referenced within the previous webpage)

            LikeLike

         2. 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
            });
            });

            LikeLike

            1. Cruclax, Erik
               Sorry, i wasn’t able to put correct piece of code into comments.
               Apppropriate code snippet is available here: https://gist.github.com/1397689

               LikeLike

10. Nice script.

    Often a textarea has a value allready

    Put your comment here…

    Than the wrong number of characters are shown…
    Nice little problem 😉

    LikeLike

    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.

       LikeLike

11. 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() {
    $j(“textarea.count-100”).each(function(i){
    var xyz = ‘.counterspan:eq(‘ + i + ‘)’;
    $j(this).NobleCount(xyz,{
    on_negative: ‘go_red’,
    max_chars: 100
    });
    });
    });

    character(s) left

    thanks for the great plugin!

    LikeLike

    1. Thanks.

       LikeLike

12. 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!

    LikeLike

    1. Dave, you can definitely do that through NobleCount. Check out http://theproductguy.com/noblecount/noblecount.demo.html for examples of similar implementations.

       LikeLike

       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 🙂

          LikeLike

       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!

          LikeLike

13. 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) {
    input.NobleCount(counter);
    }
    });

    LikeLike

    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

       LikeLike

    2. hey

       yeah i totally agree with you davis!

       in the meantime i’ve amended this line

       if (typeof c_obj == ‘string’) {

       to

       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.

       🙂

       cheers
       sissi

       LikeLike

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

       LikeLike

14. 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.

    Thanks.

    LikeLike

    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.

       LikeLike

       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!

          LikeLike

          1. If you apply NobleCount AFTER the text is already within the text region the number should start out as desired.

             LikeLike

             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

                sender.set_value(sender.get_value());

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

                LikeLike

15. 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?

    LikeLike

    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.

       LikeLike

16. It would be nice if the c_obj parameter could take an already composed selector (i.e. the result of “$(‘.something’)”) instead of requiring a string.

    LikeLike

17. 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);
    $(t_obj).val(newstr);
    char_rem = 0;

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

    LikeLike

18. 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.

    Thanks,

    Jay

    LikeLike

    1. Can you walk me through a real-world case so that I can better understand the scenario you are presenting?

       LikeLike

19. 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.

    Cheers,
    Jay

    LikeLike

    1. Interesting. Will have to think on this one a little bit.

       LikeLike

20. Pingback: Switching between two jQuery counters | DEEP in PHP

21. 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)); } }

    LikeLike

22. 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();

    LikeLike

23. 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!
    Simon.

    LikeLike

24. Hi Again,
    Re my last comment, just had a thought – The page is using UltimateSpell (http://www.karamasoft.com/ultimatespell/features.aspx).

    When I disable this, your counter works just fine.

    I dont have a clue where to go on this one, any ideas appreciated – Although I do understand its extremely difficult to get these things working well together, all the time!

    Thanks,
    Simon.

    LikeLike

25. 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.

    Regards,

    Raymond

    LikeLike

    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.
       $(“.autonoble”).each(function(ii,obj){
       var jo = $(this); // same as traditional $this
       var elength = jo.prop(“maxLength”);
       var autoid = this.id+ “_auto”+ii;
       $.data(this,”autoid”,{id:autoid,len:elength,master:jo});
       jo.after(” “+elength+” chars left”);
       jo.focus(function(){
       var qdat=$.data(this,”autoid”);
       qdat.master.prop(‘maxLength’,qdat.len+qdat.len);
       $(“#”+qdat.id).parent().show();
       });
       jo.blur(function(){
       var qdat=$.data(this,”autoid”);
       var s = qdat.master.val();
       var diddle = s.length > qdat.len;
       if (diddle)
       {
       qdat.master.val($.trim(s.slice(0,qdat.len)));
       }
       qdat.master.prop(‘maxLength’,qdat.len);
       $(“#”+qdat.id).parent().hide();
       if (diddle)
       {
       qdat.master.trigger(‘keydown’);
       }
       });
       jo.NobleCount(“#”+autoid,{
       max_chars:elength
       , on_positive: ‘go_green’
       , on_negative: ‘go_red’
       });
       jo.trigger(“blur”);
       });

       LikeLike

26. 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.

    -Daniel

    LikeLike

27. 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.

    LikeLike

28. Pingback: Count characters/sms using jQuery « Jquery « Jquery Platforms

29. 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

    LikeLike

    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.

       LikeLike

30. 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) {
    break;
    }
    }
    $(t_obj).val(text);
    }
    }, 250);
    });

    LikeLike

    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);
       });

       LikeLike

       1. thanks mate. this worked like a charm!

          LikeLike

31. 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.

    LikeLike

    1. Check out the demo link. My guess is you are configuring your selector(s) incorrectly.

       LikeLike

32. 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:

    $(‘#popUpText’).NobleCount(‘#char-count’,
    {
    max_chars: maxNoteLen,
    block_negative: true,
    on_negative: ‘go-red’,
    on_positive: ‘go-black’
    });

    LikeLike

33. Pingback: 10 jQuery Word/Text Counter Plugins | jQuery4u
34. Pingback: NobleCount | Keyzz Blog
35. Pingback: jQuery form, 100 Best plugins, tools & tutorials « Zeeshan Akhter
36. Pingback: Count characters/sms using jQuery | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

37. 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:
    $(‘#test14’).NobleCount(‘#count14’,{
    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…

    130a131,132
    > length_fun FUNCTION that is called to adjust the interpreted
    > length of the input text
    229a232,233
    > length_fun: null // FUNCTION that is called to adjust the interpreted
    > // length of the input text
    343c347
    < if ((!((find_remaining(t_obj, max_char) if ((!((find_remaining(t_obj, max_char, c_settings) < 1) &&
    377,378c381,388
    < 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;
    412c422
    var char_rem = find_remaining(t_obj, max_char, c_settings);

    LikeLike

38. Not work Ctrl+Z in IE9.

    LikeLike

39. Is this available for wordpress website? What plugin is it?

    LikeLike

40. 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 (http://stackoverflow.com/questions/12423045/how-can-i-display-a-character-count-word-count-for-redactor-rich-text-html-e), but hoping for something a little more elegant.

    LikeLike

41. Pingback: Acura - Real Admin Template (Admin Templates) | Gold WP Theme
42. Pingback: Acura – Real Admin Template (Admin Templates) | webmasterheaven.net
43. Pingback: Acura – Real Admin Template (Admin Templates) | The Talks
44. Pingback: Golden Host - Spinning the web to suit your needs » Acura – Real Admin Template (Admin Templates)

Comments are closed.