SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Addict
    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>
    the js function
    Code:
    function autocomplete(thevalue, e) {
    
    theObject = document.getElementById("superdiv");
    
    var key = e.which
    
    if(key == undefined){
    key = e.keyCode;  
    }
    
    theObject.innerHTML = thevalue;
    
    }
    I live in Madison. Where in the W1RLD do you live?

  2. #2
    Function Curry'er JimmyP's Avatar
    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)

  3. #3
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that, but with same results. whammy!
    I live in Madison. Where in the W1RLD do you live?

  4. #4
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wait, it works in FF, but not IE. IE is still one char behind.
    I live in Madison. Where in the W1RLD do you live?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 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

  6. #6
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it works now. thanks guys.
    I live in Madison. Where in the W1RLD do you live?

  7. #7
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Function Curry'er JimmyP's Avatar
    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)

  9. #9
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 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.
    http://www.w3.org/TR/html401/interac....html#h-18.2.1

    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

  11. #11
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome follow-up pmw57. Much appreciated.


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
  •