Displaying Remaining Character Count - J Query

Problem
Your company has a contact form on its website. This form has a <textarea>element to allow users to express them selves freely. However, you know time is money, and you don’t want your staff reading short novels, so you would like to limit the length of the messages they have to read. In the process, you’d also like to show the end user how many characters are remaining:

Solution

Target all .remaining messages, and for each find the associated <textarea>element and the maximum number of characters as listed in the .count child element. Bind an update function to the <textarea>to capture when the user enters text:

 // for each "Characters remaining: ###" element found
 $('.remaining').each(function(){
 // find and store the count readout and the related textarea/input field
 var $count = $('.count',this);
 var $input = $(this).prev();
 // .text() returns a string, multiply by 1 to make it a number (for math)
 var maximumCount = $count.text()*1;
 // update function is called on keyup, paste and input events
 var update = function(){
 var before = $count.text()*1;
 var now = maximumCount - $input.val().length;
 // check to make sure users haven't exceeded their limit
 if ( now < 0 ){
 var str = $input.val();
 $input.val( str.substr(0,maximumCount) );
 now = 0;
 }
 // only alter the DOM if necessary
 if ( before != now ){
 $count.text( now );
 }
 };
 // listen for change (see discussion below)
 $input.bind('input keyup paste', function(){setTimeout(update,0)} );
 // call update initially, in case input is pre-filled
 update();
 }); // close .each() 

Discussion

The preceding code is generic enough to allow for any number of “Character remaining” messages and <textarea> elements on a given page. This could be useful if you were building a content management or data entry system.
To protect against when the user attempts to copy and paste data into the <textarea> using a mouse, we need to bind both the input and paste events. The mouseup event can not be used because it is not triggered when selecting an item from the browser’s contextual menu. The input event is part of HTML5 (Working Draft) and already implemented by Firefox, Opera, and Safari. It fires on user input, regardless of input device (mouse or keyboard). Safari, at the time of this writing, has a bug and does not fire the input event on <textarea>elements. Both Safari and Internet Explorer understand the paste event on <textarea>elements and understand keyup to capture key strokes.
Attaching keyup, input, and paste is redundant but, in this case, benign. The update function is simple enough that there are n’t any performance issues, and it only manipulates the DOM when needed, so any redundant update calls after the first would do nothing.
An alternative to redundant events would be to use set Interval when the <textarea> element has focus. The same update function could be called from the interval, and if it is paired with the keyup event, you’d get the immediate updating on key presses an dan arbitrary update interval, say 300 milliseconds, for when information is pasted into the <textarea> element. If the update function were more complex or costly, this might be a better alternative.
When binding events to form elements, it is sometimes important to use a timeout to slightly delay a function call. In the previous example, Internet Explorer triggers the paste event before the text from the clipboard is actually added to the <textarea> element.
Thus, the calculation for characters remaining would be incorrect until the user clicks or presses another key. By using setTimeout(update,0), the update function is placed at the end of the call stack and will fire after that browser has added the text:

What will happen when JavaScript is disabled? You should hide the “Characters remaining” message by default in CSS. Then use JavaScript to add a class name to a parent element that would override the previous CSS rule. Also, it’s important to check the length of the message again on the server side:


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics