Discussion, advice, and reviews regarding online products, the people behind them and the trends they represent, from Modular Innovation and Product Management to User Experience and Quick-UX.

Main menu

NobleCount

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.

Usage

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.

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.

METHOD(S)

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.

$(TEXT_ENTRY_OBJECT).NobleCount(CHARACTERS_REMAINING_OBJECT);

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

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

t_obj

text entry object

char_area

characters remaining object

c_settings

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.

char_rem

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

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.

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

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.

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.

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.

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.

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.

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🙂

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?

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:

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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?