SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
-
Feb 16, 2008, 16:06 #1
- Join Date
- Feb 2006
- Posts
- 247
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I want my div to copy my form's input
ok, I have a input type="text" and when I type in it, I want my div to follow the exact value of my input. However, my div is always one character back. So If I type "ARGH" ... my div says "ARG"
the form
Code:<form action="" method="post"> <input id="searchtext" type="text" value="" onkeypress="autocomplete(this.value, event);"> </form>
Code:function autocomplete(thevalue, e) { theObject = document.getElementById("superdiv"); var key = e.which if(key == undefined){ key = e.keyCode; } theObject.innerHTML = thevalue; }
-
Feb 16, 2008, 16:14 #2
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Have you tried running it on the onkeyup event instead?
- Doing it on the onkeypress event presumably means that the last letter typed is only 'obtained' when you put the key down to type the next letter...★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
-
Feb 16, 2008, 17:03 #3
- Join Date
- Feb 2006
- Posts
- 247
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 16, 2008, 17:04 #4
- Join Date
- Feb 2006
- Posts
- 247
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 16, 2008, 19:24 #5
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Using onkeyup works in FF and IE for me.
Code Javascript:function autocomplete(thevalue, e) { theObject = document.getElementById("superdiv"); var key = e.which if(key == undefined){ key = e.keyCode; } theObject.innerHTML = thevalue; }
That key value isn't used though, and the event doesn't need to pass the parameters. With the event attribute removed the HTML is as follows
Code html4strict:<form action="" method="post"> <input id="searchtext" type="text" value=""> </form>
and the script can easily add the event which gives you easy access to the this keyword. This makes the required code much much smaller.
Code javascript:document.getElementById('searchtext').onkeyup = function () { document.getElementById("superdiv").innerHTML = this.value; }
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Feb 16, 2008, 21:10 #6
- Join Date
- Feb 2006
- Posts
- 247
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 25, 2008, 06:15 #7
I have to ask something here... I've tried messing around with the last suggestion provided by pmw57, and it never seemed to work. However, when I placed the functions and whatnot at the bottom PAST the calling code (not really "calling" - I'm talking about the form code), it did.
Is this something that is now a standard to do, or am I missing something here? I always knew that the common place for javascripts is supposed to be in the head and whatnot, but also heard that your website will run faster if javascripts are placed at the bottom of your markup.
-
Feb 25, 2008, 07:24 #8
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you need to put it in the head section then you have to initiate the function onload...
Code:window.onload = function() {STUFF HERE}
★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
-
Feb 25, 2008, 07:40 #9
Okay, but which should be done? Putting it in the head or down towards the end of the markup?
Wouldn't placing it at the end of the markup be against the W3C standards?
-
Feb 25, 2008, 12:18 #10
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
As the W3C site says about the script element:
This element may appear any number of times in the HEAD or BODY of an HTML document.
Placing your scripts at the bottom of the body is a part of Yahoo's best practices for speeding up your web site. The reason for this is that it speeds up the rendering of the page.
http://developer.yahoo.com/performance/rules.html
With scripts in the head you can have issues with multiple onload events trying to work together. If you use advanced W3C and IE event registration techniques instead, you're limiting the browsers that it will work on.
A big bonus of placing scripts at the bottom of the body is that it greatly simplifies working with page elements because you can directly interact with the elements without waiting for onload events to kick in.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Feb 25, 2008, 13:16 #11
Awesome follow-up pmw57. Much appreciated.
Bookmarks