How to limit a field with javascript-prototype and display the counter
Wednesday, December 3rd, 2008For job purposes I had to learn a lot of JavaScript, including AJAX related stuffs. Like every lazy (but intelligent) developer, I looked around for frameworks that could help me doing my work. I knew that prototype existed, but I never looked at it because of lack of interest. Well it's great, it's really great! Nowadays everybody should use frameworks, as their abstraction permits a rapid development without worrying about things like platform compatibility, in our case browsers. Prototype also has a very nice and clean syntax that overtakes functions not compatible with every browser.
In this post I'm going to report a very nice function I implemented for limiting Form input fields, like textarea and input of type text. You have to call it via onkeyup and onkeydown events. The function accepts 3 parameters: field, limit and counterDesired.
The first is the field object, you should use the keyword this for a value.
The second parameter is a limit value, the number of characters that the field should contain at maximum.
The third parameter is optional, false as default. It permits to add a visual counter after the field, like the one you see on YouTube, for example. You can either tell to the function to add the counter for you (put inside a <span> block) or to put it inside another block you've already defined. In the second case, the block must have an id of the form 'fieldID_counter'
This is the compact version, see below for some examples and the expanded, explained version:
// < ![CDATA[
function limit_text(field, limit, counterDesired) {
if (counterDesired == null)
counterDesired = false;
var length = $F(field).length;
if (length > limit)
$(field).value = $(field).value.substring(0, limit);
if (counterDesired) {
if ($($(field).id + '_counter')) {
$($(field).id + '_counter').update($F(field).length + " / " + limit);
} else {
var counterText = new Element('span', {'id': $(field).id + '_counter'});
counterText.update($F(field).length + " / " + limit);
$(field).insert({'after': counterText});
}
}
}
// ]]>
</script>
