SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    auto count character

    Hello good pple of the forum,
    I have an html textarea box and in there i want to be able to read the characters that is been typed in using a textbox just underneath the textarea box. For instance the textbox underneath would have 120/120 so when the character are being typed into the textarea the textbox should automatically read 119....
    Please any code insight would help
    Thank you
    What sitepoint made me to do:
    Select from 1,2,3,4,5,6,7 8 9where name='ghostme'

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://soulscratch.com/code/js/auto-count.html

    This is my first time doing it as well. Mine works well at first, but instead of going from 120 downward I decided to start it at 0.

    However, mine also doesn't automatically count if you refresh and the text is still in there.. and if you paste something that's larger than 120 chars it doesn't automatically remove until its 120.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ghostme View Post
    I have an html textarea box and in there i want to be able to read the characters that is been typed in using a textbox just underneath the textarea box. For instance the textbox underneath would have 120/120 so when the character are being typed into the textarea the textbox should automatically read 119....
    here is how I would handle it.

    Code html4strict:
    <textarea id="myTextarea"></textarea>

    Add a notification area below the textarea

    Code javascript:
    var textarea = document.getElementById('myTextarea');
    // create notification area
    var p = document.createElement('p');
    p.id = 'myCountdown';
    if (textarea.nextSibling) {
        textarea.parentNode.insertBefore(p, textarea.nextSibling);
    } else {
    	textarea.parentNode.appendChild(p);
    }

    Attach events and start one, to populate the notification area

    Code javascript:
    // setup the text area
    textarea.onkeydown = captureKeyDown;
    textarea.onkeyup = captureKeyUp;
    textarea.limit = 120;
    // init countdown area
    captureKeyUp.call(textarea);

    When a key is pressed, you don't want to accept it if you're past the limit. Allow exceptions for special characters though.

    Code javascript:
    function captureKeyDown(e) {
    	e = e || window.event;
    	var key = e.which || e.keyCode;
    	if (key >= 32) {
    		// add one to the length because the
    		// key hasn't yet been added to the value
    		if (this.value.length + 1 > this.limit) {
    			// cancel keystroke
    			return false;
    		}
    	}
    }

    If the keydown didn't cancel the keypress, the keyup event updates the notification area, and makes sure that problems don't occur if someone pastes a lot of text in there.

    Code javascript:
    function captureKeyUp(e) {
    	var countdown = document.getElementById('myCountdown');
    	// clear countdown area
    	while (countdown.firstChild) {
    		countdown.removeChild(countdown.firstChild);
    	}
    	// check that we don't have more than the
    	// limit, which can occur when pasting text
    	if (this.value.length > this.limit) {
    		this.value = this.value.substr(0, this.limit);
    	}
    	// calculate characters left
    	var left = this.limit - this.value.length;
    	var text = document.createTextNode('Characters remaining: ' + left);
    	countdown.appendChild(text);
    }

    here is the full code wrapped up in a sample test case.

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    	<title>Character Countdown</title>
    </head>
     
    <body>
    <textarea id="myTextarea"></textarea>
    <script>
    // anonymous function and scoping to protect the global namespace
    (function () {
    	function captureKeyDown(e) {
    		e = e || window.event;
    		var key = e.which || e.keyCode;
    		if (key >= 32) {
    			// add one to the length because the
    			// key hasn't yet been added to the value
    			if (this.value.length + 1 > this.limit) {
    				// cancel keystroke
    				return false;
    			}
    		}
    	}
    	function captureKeyUp(e) {
    		var countdown = document.getElementById('myCountdown');
    		// clear countdown area
    		while (countdown.firstChild) {
    			countdown.removeChild(countdown.firstChild);
    		}
    		// check that we don't have more than the
    		// limit which can occur when pasting text
    		if (this.value.length > this.limit) {
    			this.value = this.value.substr(0, this.limit);
    		}
    		// calculate characters left
    		var left = this.limit - this.value.length;
    		var text = document.createTextNode('Characters remaining: ' + left);
    		countdown.appendChild(text);
    	}
    	var textarea = document.getElementById('myTextarea');
    	// create notification area
    	var p = document.createElement('p');
    	p.id = 'myCountdown';
    	if (textarea.nextSibling) {
    	    textarea.parentNode.insertBefore(p, textarea.nextSibling);
    	} else {
    		textarea.parentNode.appendChild(p);
    	}
    	// setup the text area
    	textarea.onkeydown = captureKeyDown;
    	textarea.onkeyup = captureKeyUp;
    	textarea.limit = 120;
    	// init countdown area
    	captureKeyUp.call(textarea);
    })();
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh. Completely forgot about the limit. Hmm, shouldn't it be maxlength instead of limit? Or did I never pick up on ".limit" ?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    I've used the term "limit" here to indicate the limit that we've set on the amount of text.

    That can be renamed to most any other term you like, like "maxlength" or whatever else makes more sense to you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Err, so you're saying you defined a property called limit and assigned it to the element? What I'm referring to is setting the attribute maxlength for the textarea..

  7. #7
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot guys soulscratch and pmw57 worked as expected.
    nice one
    What sitepoint made me to do:
    Select from 1,2,3,4,5,6,7 8 9where name='ghostme'

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Err, so you're saying you defined a property called limit and assigned it to the element? What I'm referring to is setting the attribute maxlength for the textarea..
    The textarea element doesn't have a maxlength attribute. That attribute is only for input elements.
    http://www.w3.org/TR/html4/interact/forms.html#h-17.7
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Argh! I was thinking it didn't have a maxlength but then I kept thinking of all the maxlengths this one <form> I was working on .. could've sworn i saw maxlength attribute on textarea but it seems you're right

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    It's still possible that you saw a maxlength on a textarea. It wouldn't have done much but there ya go.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,
    It is possible to add the maxlength attribute to the textarea, however, you would need to either create a new DTD or modify the existing one and add that attribute in.

    This article may be of interest.

    Cheers,
    YMas

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by YMas View Post
    Hello,
    It is possible to add the maxlength attribute to the textarea, however, you would need to either create a new DTD or modify the existing one and add that attribute in.

    This article may be of interest.

    It is possible to add the attribute but browsers won't know what to do with it.

    You should also read an article that shortly followed the above referenced one, written in reply, that went into why custom DTDs are a bad thing.

    More About Custom DTDs by The W3C QA Group
    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
  •