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

H

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:

%MINIFYHTMLa7cdab2476a0d63ba26fcb110b14c4a13%

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

%MINIFYHTMLa7cdab2476a0d63ba26fcb110b14c4a14%

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.

About the author

dgraziotin

Dr. Daniel Graziotin is a senior researcher (Akademischer Rat) at the University of Stuttgart, Germany. His research interests include human, behavioral, and psychological aspects of empirical software engineering, studies of science, and open science. He is associate editor at the Journal of Open Research Software and academic editor at the Research Ideas and Outcomes (RIO) journal. Daniel was awarded an Alexander von Humboldt Fellowship for postdoctoral researchers in 2017, the European Design Award (bronze) in 2016, and the Data Journalism Award in 2015. He received his Ph.D. in computer science at the Free University of Bozen-Bolzano, Italy.

4 comments

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By dgraziotin

About Author

dgraziotin

Dr. Daniel Graziotin is a senior researcher (Akademischer Rat) at the University of Stuttgart, Germany. His research interests include human, behavioral, and psychological aspects of empirical software engineering, studies of science, and open science. He is associate editor at the Journal of Open Research Software and academic editor at the Research Ideas and Outcomes (RIO) journal. Daniel was awarded an Alexander von Humboldt Fellowship for postdoctoral researchers in 2017, the European Design Award (bronze) in 2016, and the Data Journalism Award in 2015. He received his Ph.D. in computer science at the Free University of Bozen-Bolzano, Italy.