SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text field to <div>

    I have a textarea/text field char counter script I'm tying to implement. It's working, but is not the prettiest when having to use a text field to display the remaining chars. I would like to have those show up inside a <div> or <span> if possible. I've done this in the past and know it works, but just can't get it to work with this particluar script.
    Code:
    <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>
    
    <form name="myform">
    <input name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,this.form.countdown,15);" 
    onKeyUp="limitText(this.form.limitedtextfield,this.form.countdown,15);" maxlength="15"><br>
    (Maximum characters: 15)<br>
    You have <input readonly type="text" name="countdown" size="3" value="15"> characters left
    </form>

  2. #2
    SitePoint Enthusiast birnam's Avatar
    Join Date
    Oct 2006
    Location
    Kansas City
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try something like this:

    Code:
    <script language="javascript" type="text/javascript">
    	function limitText(limitField, limitCount, limitNum) {
    		var obj = document.getElementById(limitCount);
    		obj.innerHTML = limitNum - limitField.value.length;
    	}
    	</script>
    	
    	<form name="myform">
    	<input name="limitedtextfield" type="text" onKeyDown="limitText(this,'charleft',15);" 
    	onKeyUp="limitText(this,'charleft',15);" maxlength="15"><br>
    	(Maximum characters: 15)<br>
    	You have <span id="charleft">15</span> characters left
    	</form>
    There is some opinion regarding the best way to edit the content of the span. Using innerHTML is not DOM friendly, but it is fast and easy.
    quality web development at Birnam Designs
    articles and tips for developers at Hunk of, Hunk of Birnam Love

  3. #3
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might want to study this a bit: http://www.quirksmode.org/dom/maxlength.html

  4. #4
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. Neither one works for me. I need to have more than one on a page (each instance is dynamically named via PHP) and it needs to stop allowing text to be entered once the max is reached.

  5. #5
    SitePoint Enthusiast birnam's Avatar
    Join Date
    Oct 2006
    Location
    Kansas City
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You just need a different ID attribute in each span, and you can duplicate this as often as necessary (and remember to reference the corresponding ID in the javascript function call).

    Just having maxlength set will prevent the user from typing in more characters.
    quality web development at Birnam Designs
    articles and tips for developers at Hunk of, Hunk of Birnam Love

  6. #6
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One problem is that each instance is dynamically generated. At this time there are 11 textareas in the form. So I'll then need to have 11 instances of this script. Since this is dynamic, there may be 1 instance, there may be 5 instances, there may be 20. I don't really like the idea of having 20 versions of the same script on a page

  7. #7
    SitePoint Enthusiast birnam's Avatar
    Join Date
    Oct 2006
    Location
    Kansas City
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why would you need multiple instances of the script?

    Code:
    <script language="javascript" type="text/javascript">
    function limitText(limitField, limitCount, limitNum) {
    	var obj = document.getElementById(limitCount);
    	obj.innerHTML = limitNum - limitField.value.length;
    }
    </script>
    
    <form name="myform">
    <input name="limitedtextfield" type="text" onKeyDown="limitText(this,'charleft1',15);" 
    onKeyUp="limitText(this,'charleft1',15);" maxlength="15"><br>
    (Maximum characters: 15)<br>
    You have <span id="charleft1">15</span> characters left<br />
    
    <input name="limitedtextfield" type="text" onKeyDown="limitText(this,'charleft2',15);" 
    onKeyUp="limitText(this,'charleft2',15);" maxlength="15"><br>
    (Maximum characters: 15)<br>
    You have <span id="charleft2">15</span> characters left<br />
    
    <input name="limitedtextfield" type="text" onKeyDown="limitText(this,'charleft3',15);" 
    onKeyUp="limitText(this,'charleft3',15);" maxlength="15"><br>
    (Maximum characters: 15)<br>
    You have <span id="charleft3">15</span> characters left<br />
    
    <input name="limitedtextfield" type="text" onKeyDown="limitText(this,'charleft4',15);" 
    onKeyUp="limitText(this,'charleft4',15);" maxlength="15"><br>
    (Maximum characters: 15)<br>
    You have <span id="charleft4">15</span> characters left<br />
    
    <input name="limitedtextfield" type="text" onKeyDown="limitText(this,'charleft5',15);" 
    onKeyUp="limitText(this,'charleft5',15);" maxlength="15"><br>
    (Maximum characters: 15)<br>
    You have <span id="charleft5">15</span> characters left<br />
    
    </form>
    quality web development at Birnam Designs
    articles and tips for developers at Hunk of, Hunk of Birnam Love

  8. #8
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by birnam
    Why would you need multiple instances of the script?
    My Bad. I misunderstood something. Okay, so that works
    Problem though, is that on a textarea maxlength doesn't work. So the numbers now go into a negative value instead of stopping.

  9. #9
    SitePoint Enthusiast birnam's Avatar
    Join Date
    Oct 2006
    Location
    Kansas City
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh ok, well that is a little different because of the lack of maxlength in textareas. Here's something I came up with:

    Code:
    <script language="javascript" type="text/javascript">
    function limitText(limitField, limitCount, limitNum, e) {
    	limitField.value = limitField.value.substring(0, limitNum);	// ensures length in case of Copy&Paste
    	var obj = document.getElementById(limitCount);
    	obj.innerHTML = limitNum - limitField.value.length;
    	var goodkeys = new Array(8, 9, 33, 34, 35, 36, 37, 38, 39, 40, 46);
    	for (i=0; i < goodkeys.length; i++) { if (e.keyCode == goodkeys[i]) return true; }	// allow delete, backspace, arrows, etc.
    	if (limitField.value.length >= limitField.getAttribute("maxlength")) return false;	// if too many chars, just ignore key event
    	return true;
    }
    </script>
    
    <form name="myform">
    <textarea name="limitedtextfield" onKeyUp="return limitText(this,'charleft1',15, event);" 
    onKeyDown="return limitText(this,'charleft1',15, event);" maxlength="15"></textarea><br>
    (Maximum characters: 15)<br>
    You have <span id="charleft1">15</span> characters left<br />
    <input type="text" name="limitedtextfield" onKeyUp="return limitText(this,'charleft2',15, event);" 
    onKeyDown="return limitText(this,'charleft2',15, event);" maxlength="15" /><br>
    (Maximum characters: 15)<br>
    You have <span id="charleft2">15</span> characters left<br />
    <textarea name="limitedtextfield" onKeyUp="return limitText(this,'charleft3',15, event);" 
    onKeyDown="return limitText(this,'charleft3',15, event);" maxlength="15"></textarea><br>
    (Maximum characters: 15)<br>
    You have <span id="charleft3">15</span> characters left<br />
    <input type="text" name="limitedtextfield" onKeyUp="return limitText(this,'charleft4',15, event);" 
    onKeyDown="return limitText(this,'charleft4',15, event);" maxlength="15" /><br>
    (Maximum characters: 15)<br>
    You have <span id="charleft4">15</span> characters left<br />
    </form>
    quality web development at Birnam Designs
    articles and tips for developers at Hunk of, Hunk of Birnam Love

  10. #10
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by birnam
    oh ok, well that is a little different because of the lack of maxlength in textareas. Here's something I came up with:
    Awesome!

    I couldn't find anything that worked properly with IE, FF and Safari, yet doesn't produce any errors in FF's Error Console or anywhere in IE. And what I was using before wouldn't let Safari users edit the form after it was submitted. This works perfectly.

    Thanks a helluva lot birnam.

  11. #11
    SitePoint Enthusiast birnam's Avatar
    Join Date
    Oct 2006
    Location
    Kansas City
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not a problem!
    quality web development at Birnam Designs
    articles and tips for developers at Hunk of, Hunk of Birnam Love


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
  •