I am working on a form with a large number of text areas. I want to create a
"counter" above each textarea that counts the characters as they type,
turning red if they are over the limit or green if they are under. I am new
to jquery and this seems like a natural application.
For example, I want to search for all textareas in a document, then check
their ID's for a max length value:
<textarea id="foo_512" name="spork">sometext</textarea>
<textarea id="bar_256" name="spork2">sometext</textarea>
I want to dynamically prepend a block of HTML including a <span> that I can
assign a color: style to, depending on whether the value.length is over or
under that limit (red or green. Or perhaps a class). Might look like this:
Current length: <span id="bar_256_len"></span> characters<br/>
<textarea id="bar_256" name="spork2">sometext</textarea>
The counter should work using keypress and update the preceding span element
that it creates, both the innerHTML and the style/class based on the length
of the textarea's value and whether it is over or under the limit set in the
ID attr.
One of my bigger problems is how to find the preceding span. I haven't seen
any examples of selectors being constructed dynamically, so while this
should work (in theory):
$(textarea).prepend('Current length: <span id="'+ this.id
+'_len"></span> characters')
I'm not sure how to build the .keypress( function() { } )
I'm still working on this but some advice from the gurus would be most
helpful.
--
View this message in context:
http://www.nabble.com/Textarea-character-count-tf3062230.html#a8515235
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
