javascript - e.target.value shows values one key 'behind' - Stack Overflow

admin管理员组

文章数量:1356709

Input type with id 'typehere'. There is a keydown event set on typhere. The simple problem is that e.srcElement.value seems to have a value one key behind. i.e. if the value should 's' , its consoled'logged as blank '' . If I type 'ss' , the value shown is 's' . I can't seem to figure this one out.

console.log(e), shows the correct value of e.srcElement.value (in the console), but console.log(e.srcElement.value) shows the wrong value. Why?

<script type="text/javascript">
            var xmlHttp = createXmlHttpRequestObject();
            selectOption = document.getElementById('choose_colony') ;

            document.body.onload = function () {
                typehere = document.getElementById('typehere') ;

                addAnEvent(typehere,"keydown",handleKeyDownevent,false )  ;
            }

            function handleKeyDownevent (e) {
                e = e || window.event ;
                if (xmlHttp) {
                    try {
                        //xmlHttp.open('GET' , 'async.txt', true ) ;
                           console.log(e.srcElement.value ) ;
                       var target=  e.target || e.srcElement ;
                        var typed = target.value      ;
                        if (typed != ""){
                            console.log('sennding request') ;
                            //ajax request
                        }
                        else {
                            console.log(e.srcElement.value + "is blank") ;
                        }
                    }
                    catch(e) {
                        console.log('could not connect to server') ;
                    }
                }

            }
</script>

The script tag are before the </body> tag btw

Input type with id 'typehere'. There is a keydown event set on typhere. The simple problem is that e.srcElement.value seems to have a value one key behind. i.e. if the value should 's' , its consoled'logged as blank '' . If I type 'ss' , the value shown is 's' . I can't seem to figure this one out.

console.log(e), shows the correct value of e.srcElement.value (in the console), but console.log(e.srcElement.value) shows the wrong value. Why?

<script type="text/javascript">
            var xmlHttp = createXmlHttpRequestObject();
            selectOption = document.getElementById('choose_colony') ;

            document.body.onload = function () {
                typehere = document.getElementById('typehere') ;

                addAnEvent(typehere,"keydown",handleKeyDownevent,false )  ;
            }

            function handleKeyDownevent (e) {
                e = e || window.event ;
                if (xmlHttp) {
                    try {
                        //xmlHttp.open('GET' , 'async.txt', true ) ;
                           console.log(e.srcElement.value ) ;
                       var target=  e.target || e.srcElement ;
                        var typed = target.value      ;
                        if (typed != ""){
                            console.log('sennding request') ;
                            //ajax request
                        }
                        else {
                            console.log(e.srcElement.value + "is blank") ;
                        }
                    }
                    catch(e) {
                        console.log('could not connect to server') ;
                    }
                }

            }
</script>

The script tag are before the </body> tag btw

• javascript
• dom-events

Share Improve this question Follow edited Mar 19, 2021 at 7:35 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 7, 2012 at 13:48 gyaani_guygyaani_guy 3,20999 gold badges4444 silver badges5353 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

(For typeable characters, you typically want keypress rather than keydown as keypress repeats.)

keydown is fired before the value has changed (as does keypress), not least so you can cancel the keypress, so if you want to process the value after it's changed, you may want to defer your call using setTimeout(func, 0). Your call will get processed after the event chain unwinds. (Typically within 5-10 milliseconds.)

Live example

So in your code, that might look like this:

addAnEvent(typehere,"keydown",function(e) { // or "keypress"
    e = e || window.event;
    setTimeout(function() {
        handleKeyDownevent(e);
    }, 0);
},false )  ;

use keyup event instead of keydown.

The simple answer lies in the fact that when you are trying to determine the value of a variable that is within an event, it is processed by an event handler, and therefore it is best to simply log the event itself. So you could try modifying your code to acmodate for that, to see if helps. Also, I disagree with above answer about needing to set/include a time-out (function), unless you are trying to cancel any keystrokes, etc. To clarify:

<script type="text/javascript">
        var xmlHttp = createXmlHttpRequestObject();
        selectOption = document.getElementById('choose_colony') ;

        document.body.onload = function () {
            typehere = document.getElementById('typehere');
            addAnEvent(typehere, "keydown", function(e) { 
                e = e || window.event;
                handleKeyDownevent(e);}, false);
        }
function handleKeyDownevent (e) {
            e = e || window.event ;
            if (xmlHttp) {
                try {
                    //xmlHttp.open('GET' , 'async.txt', true ) ;
                       console.log(e.srcElement.value ) ;
                   var target=  e.target || e.srcElement ;
                    var typed = target.value      ;
                    if (typed != ""){
                        console.log('sennding request') ;
                        //ajax request
                    }
                    else {
                        console.log(e.srcElement.value + "is blank") ;
                    }
                }
                catch(e) {
                    console.log('could not connect to server') ;
                }
            }
          return true;
        }
</script>

I hope that helps you out. The return true at the bottom allows the browser's default response.

本文标签： javascriptetargetvalue shows values one key 39behind39Stack Overflow