SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with text area character counter

    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.

    Code:
    <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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://jsfiddle.net/PhnYV/

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    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. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Use the following and it should work fine.

    HTML Code:
    <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. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •