Apr 10, 2011

How to limit a field with javascript-prototype and display the counter

For 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: fieldlimit 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:

This is the longer version for those who want a better understanding:

Because of Prototypejs, I’m sure this works with every browser, at least those supported by prototype, and I don’t have to worry about compatibility issues!
I hope this may help you, and comment this post if you have suggestions or thoughts..

Author’s Note

This is one of the posts that I unluckily lost on 2011-04-09 and then recovered.
Therefore, I could have written it months, even years ago. Or not.

written by dgraziotin

Dr. Daniel Graziotin received his PhD in computer science, software engineering at the Free University of Bozen-Bolzano, Italy. His research interests include human aspects in empirical software engineering with psychological measurements, Web engineering, and open science. He researches, publishes, and reviews for venues in software engineering, human-computer interaction, and psychology. Daniel is the founder of the psychoempirical software engineering discipline and guidelines. He is associate editor at the Journal of Open Research Software, academic editor at the Research Ideas and Outcomes (RIO) journal, and academic editor at the Open Communications in Computer Science journal. He is the local coordinator of the Italian Open science local group for the Open Knowledge Foundation. He is a member of ACM, SIGSOFT, and IEEE.

  • Max Oct 21, 2015 Reply

    How about limiting a textarea based on the class name ?

    • dgraziotin Oct 22, 2015 Reply

      Hey Max, I wrote this post before 2011. It is quite outdated now. I bet that there are many ways to achieve this, which are more efficient and more elegant.

  • JMz May 15, 2016 Reply

    I can’t recall what event trigger I should use.

  • JMz May 15, 2016 Reply

    I can’t recall what event trigger I should use.
    eg, > input type=”text” on????=limit_text(this, 160, CountMe) / <

Leave a comment