Hi there,
I got one ready to use. I wanted to make a plugin out of it, haven't
done so yet...soon I hope.
See below for code:
== Javascript ==
$(document).ready(function(){
// set the max chars
$("[EMAIL PROTECTED]").each(function(){
var max = this.getAttribute('maxlength');
var html_counter = "<div class=\"counter\"><span>0</span>/" + max
+"</div>";
$(this).before(html_counter);
this.relatedElement = $('span')[0];
});
// check the max chars
$("[EMAIL PROTECTED]").keyup(function(){
var maxLength = this.getAttribute('maxlength');
var currentLength = this.value.length;
if(currentLength >= maxLength) {
this.relatedElement.className = 'toomuch';
this.value = this.value.substring(0, maxLength);
} else {
this.relatedElement.className = '';
}
this.relatedElement.firstChild.nodeValue = currentLength;
});
});
== HTML ==
Use the following html:
<textarea maxlength="300"></textarea><br />
== What it does ==
The code is based on the excellent example by PPK [1].
When the document is ready. We'll set the counter. The script will look
for all textarea's which contain a maxlength attribute. It will get the
value from the maxlength attribute and create the appropriate html tags
for the counter. The html for the counter will be placed before the
textarea in the DOM. Last but not least we will set an attribute which
links a specific textarea to a specific counter.
Anytime a keyup event takes place in one of the textarea's with an
attribute maxlength (and thus one with the counter) we will check the
current amount of characters and check it with the maximum set. If the
current length is the same or bigger than the maximum we'll set the
class 'toomuch' on the textarea (so we can add some visual style) and
strip the extra character until we get the maximum length. If the
current length is less than the maximum we'll reset the classname to
empty (and thus remove any visual style previously added).
== Links ==
[1] http://www.quirksmode.org/book/examplescripts/maxlength/index.html
Daemach wrote:
> 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.
>
>
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
