CODEWITHSUNDEEP
javascriptcharactercountdownmax
Zach Dehnert
Zach Dehnert

Reputation: 21

How do I add a counter to a javascript text area that counts like Twitter but instead of down it goes up to a maximum of 150 characters

I know little about javascript and implementing it but I found this:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

and then this piece to implement it:

<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);">
</textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" name="countdown" size="3" value="100"> character left.</font>
</form>

How do I make it instead of it counting down but to count up to 150 characters?

Upvotes: 2

Views: 520

Answers (1)

jeff
jeff

Reputation: 8348

Here's the code you need:

Javascript portion:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        // notice I set the value of the count to the length of the field
        // rather than setting it to the max chars - the length of the field
        limitCount.value = limitField.value.length;
    }
}
</script>

HTML portion:

<!-- changed all occurrences of 100 to 150 to match your specified max characters -->
<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,150);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,150);">
</textarea><br>
<font size="1">(Maximum characters: 150)<br>
<!-- here I changed "You have x characters left" to "You have used x characters." -->
You have used <input readonly type="text" name="countdown" size="3" value="0"> characters.</font>
</form>

Working example: http://jsfiddle.net/EcDBE/

I recommend trying to actually understand the changes I've made, rather than simply copying and pasting the provided code, however. To aid you in this, I put comments in the code to show what changes I made.

Upvotes: 2

Related Questions