SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Character Counter OnLoad

    How can I make my character counter display how many characters are left on page load. Right now it only displayed the number of characters left when I user keysup, keysdown or onblurs.

    Code JavaScript:
                    var companydo	= document.getElementById('cscompanydo');
     
    		function validate_companydo_field_length() {	
    			var len = companydo.value.length;
    			var mc = 2000;
    			if (len > mc) {
    				companydo.value = companydo.value.substring(0,mc);
    				len = mc;
    			}
    			document.getElementById('doremaining').innerHTML = mc - len;
    		}
     
    		companydo.onkeyup		= validate_companydo_field_length;
    		companydo.onkeydown	= validate_companydo_field_length;
    		companydo.onblur		= validate_companydo_field_length;

    Code HTML4Strict:
    <textarea class="medium mediumwidth man" id="cscompanydo" name="companydo" rows="" cols=""><?php echo $answer['companydo']; ?></textarea>
    <div class="f_right mts mrs"><span id="doremaining" class="mrs">2000</span>characters remaining</div>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    If you put the script at the end of the body (which is where scripts should be, just before the </body> tag), you can then trigger one of the events manually with:

    Code javascript:
    companydo.onkeyup();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    If you put the script at the end of the body (which is where scripts should be, just before the </body> tag), you can then trigger one of the events manually with:

    Code javascript:
    companydo.onkeyup();
    Yes, but I want the character count displayed when the page loads. It defaults to 2000 before anyone types anything. It also will show 2000 even if text is currently in the textarea so long as you haven't typed in it yet.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by unemployment View Post
    Yes, but I want the character count displayed when the page loads.
    You are misinterpreting what I said. Putting script commands at the end of the body allows you to run script command before the page load event occurs.

    Let me try and get this idea across to you in a different way.

    You need to run the script that updates the character count when the page loads. That means you need to run a script that triggers the update.

    You have already attached an onkeyup event to the companydo element with the following command:

    Code:
    companydo.onkeyup = validate_companydo_field_length;
    So you now need to trigger that onkeyup event when the page loads, which will allow the counter number to be updated.

    The code you need to add in order to trigger that onkeyup event is:

    Code javascript:
    companydo.onkeyup();

    Whether you run that triggering script from an onload event, or from the end of the body just before the </body> tag, or in some other way, it is the act of running that additional line of code that allows the character count to update.

    I advise that you add that line of code to your script, and that you load your script from the end of the body.

    Best practices: Put scripts at bottom

    script.js
    Code javascript:
    var companydo = document.getElementById('cscompanydo');
    // other code ...
     
    companydo.onkeyup = validate_companydo_field_length;
    companydo.onkeydown = validate_companydo_field_length;
    companydo.onblur = validate_companydo_field_length;
     
    companydo.onkeyup();

    Code html4strict:
    <body>
    <!-- form stuff here -->
     
    <script type="text/javascript" src="script.js">
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •