Need help with text area character counter

JavaScript
1

I’m using this web page upload script code (below) - that works well. It would be more convenient for the user if I could add some type of character counter in the text area of this form, telling the user how many characters until he’s reach his limit (250 characters).

Any help would be greatly appreciated.

<form name="form_upload" action="upload1.php" method="post">
<div id="uploadvideo1"><br /><br />
<ul>
<li style="width:240px; text-align:right;">[var.lang_title]:</li>
<li style="width:400px; text-align:left;"><input name="title" type="text" class="upload-video-form-input" value="[var.title]" size="38" />
</li>

<li style="width:240px; text-align:right;">[var.lang_description]:<br />(250 characters max.)</li>
<li style="width:400px; text-align:left;"><textarea rows="4" name="description" cols="29" class="upload-video-form-input">[var.description]</textarea>
</li>

<li style="width:240px; text-align:right;">Search Tags:</li>
<li style="width:400px; text-align:left;"><input name="tags" type="text" class="upload-video-form-input" value="[var.tags]" size="38" />
</li>

<li style="width:240px; text-align:right;"></li>
<li style="width:400px; text-align:left;">
<input type="hidden" name="channel" value="SINGLECHANNEL"/></li></ul>
<input class="upload-video-form-input" type="hidden" name="form_submitted" value="yes" />
</form>
</div>
2

See the following I put together, all it does it simply binds event listeners to the textarea field and updates the counter based on the text value of the input.

3

Thanks for the reply.
I don’t know what you mean by “binds event listeners to the textarea field”.
Also, can someone help me integrate your suggested code into my existing code?

Thanks again.

4

Use the following and it should work fine.


<form name="form_upload" action="upload1.php" method="post">
    <div id="uploadvideo1">
        <br /><br />
        <ul>
            <li style="width:240px; text-align:right;">[var.lang_title]:</li>
            <li style="width:400px; text-align:left;">
                <input name="title" type="text" class="upload-video-form-input" value="[var.title]" size="38" />
            </li>
                            
            <li style="width:240px; text-align:right;">[var.lang_description]:<br />(250 characters max.)</li>
            <li style="width:400px; text-align:left;">
                <textarea rows="4" name="description" id="description" cols="29" class="upload-video-form-input">[var.description]</textarea>
                Total Characters: <span id="total">0</span>
            </li>
            
            <li style="width:240px; text-align:right;">Search Tags:</li>
            <li style="width:400px; text-align:left;">
                <input name="tags" type="text" class="upload-video-form-input" value="[var.tags]" size="38" />
            </li>
            <li style="width:240px; text-align:right;"></li>
            <li style="width:400px; text-align:left;">
                <input type="hidden" name="channel" value="SINGLECHANNEL"/>
            </li>
        </ul>
        <input class="upload-video-form-input" type="hidden" name="form_submitted" value="yes" />
    </div>
</form>
<script type="text/javascript">
    // A simple character counter for the textarea field
    function counter() {
        tot.innerHTML = this.value.length;
    }
    
    // Find the <textarea> element in the DOM
    var ele = document.getElementById('description') || false,
        tot = document.getElementById('total') || false;
    
    if (ele && tot) {
        // Bind some event handlers to the element
        ele.onkeyup = counter;
        ele.onfocus = counter;
        ele.onblur  = counter;
    }
</script>
5

I’ve been using this successfully:

Contents of charcount.js:

/* Created by: kojak :: http://commoncoder.com */

// fieldname, warningname, remainingname, maxchars
function CheckFieldLength(fn,wn,rn,mc) {
var len = fn.value.length;
if (len > mc) {
fn.value = fn.value.substring(0,mc);
len = mc;
}
document.getElementById(wn).innerHTML = len;
document.getElementById(rn).innerHTML = mc - len;
}

Reference it in your <head>:

<script src=“…/js/charcount.js” type=“text/javascript”></script> <!–code to count characters in textarea –>

How I use it in HTML:
Note: change the “80” in three places to the maximum number of characters allowed in field.
Change the textarea id in all the places it occurs, both in the textarea and div code.
The <div> below the <textarea> will output the character count.

<textarea name=“TTwoTrackNotes” id=“TTwoTrackNotes” cols=“20” rows=“4”
onkeyup=“CheckFieldLength(TTwoTrackNotes, ‘charcount-TTwoTrackNotes’, ‘remaining-TTwoTrackNotes’, 80);” onkeydown=“CheckFieldLength(TTwoTrackNotes, ‘charcount-TTwoTrackNotes’, ‘remaining-TTwoTrackNotes’, 80);” onmouseout=“CheckFieldLength(TTwoTrackNotes, ‘charcount-TTwoTrackNotes’, ‘remaining-TTwoTrackNotes’, 80);” onchange=“persistDataTrackTwo()”></textarea>
<br>
<div><span id=“charcount-TTwoTrackNotes”>0</span> characters entered - <span id=“remaining-TTwoTrackNotes”>80</span> left</div>