SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Display text as you type in a field

    I want to have text appear in a given location on the page as I type it in an input field of a form, instantly. Is this easy?

    Any directions would be great, thanks!

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have time to write up the code now but you need to use the onkeydown to trigger a javascript code which should use a innerHTML and a div to write the text to the page.

    Just do a search for those two terms to get yourself started.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip, Aaron. I think I got something useful on this page http://www.shawnolson.net/a/1033/ I guess I just need to move the atribute from the submit button to the input field for onkeydown...

    Thanks!

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Rancho Cordova
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here ya go.

    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<title>Enegam.com</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<script type="text/javascript">
    		window.onload=function()
    		{
    			document.getElementById('txt').onkeyup=function(){copyText(this.value)};
    		}	
    		function clearNodes(obj)
    		{
    			while(obj.hasChildNodes())
    			{
    				obj.removeChild(obj.childNodes[0]);
    			}
    		}
    		function copyText(str)
    		{
    			var obj=document.getElementById('output');
    			clearNodes(obj);
    			obj.appendChild(document.createTextNode(str));
    		}
    		</script>
    	</head>
    	<body>
    		<form>
    			<textarea id="txt"></textarea>
    		</form>
    		<div id="output">
    		</div>
    	</body>
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just perfect, thanks guys!


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
  •