Keydown processes previous character instead of current one

问题

I try to create an MS-Dos emulation window with jquery and ajax. It works well but when I type a word or press enter, the script is one character too late on display (no character displayed on first press then, for each next keydown, it shows the previous character typed by the user instead of the current one).

Here is a simplified version of my script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/terminal.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() 
            {       
                //set cursor position
                $('#cursor').css('left','0px');

                //focus on textfield
                $('#field').focus();

                //On key down...
                $('#field').keydown(function(event) 
                {
                    request=$(this).val();
                    count=$(this).val().length;

                    //Display chars as they come
                    $("#instruct").html(request);

                    // If "enter" is pressed
                    if (event.which == 13) 
                    {
                        event.preventDefault();

                        //clean user entry
                        request=request.replace(/\n/g, "");

                        // Process user entry
                        $.ajax({
                              type: "POST",
                              url: "scripts/ajax/terminal.php",
                              data: {command:request},
                              success: function(response) 
                              {
                                // if user typed something before pressing "enter"
                                if(response !='')
                                {
                                    // update list by logging the previous entry, showing system response and clearing the textarea
                                    $('#log').append("<li class='user'>--- &gt;<span>"+request+"</span></li>");
                                    $('#log').append("<li class='sys' >SYS &gt;<span>"+response+"</span></li>");
                                    $('#field').val('');
                                }
                              }
                        }); 
                    }
                });             
            });
        </script>   
    </head>

    <body>
        <ul id="log">
            <li class='sys'>Sys &gt;<span>Identification required</span></li>
        </ul>

        <ul id="realtime">
            <li id="live-space">
                <span class="user-line">--- &gt;</span>
                <textarea type="text" id="field"></textarea>
                <div>
                    <span id="instruct"></span><div id="cursor">_</div>
                </div>
            </li>
        </ul>
    </body>
</html>

I'm sure "keyDown" is fired when it should because when I change this

$("#instruct").html(request);

into this

$("#instruct").html(request+'x');

...the "x" will show up directly after the first keydown while the "request" content will be delayed to the next keydown (for instance, if I type "a", I will only see "x" and when I type "b" immediatly after, I see "ax", etc...).

So it's not about firing the keydown but about picking the right character at the right time.

What do I do wrong?

Thank you.

回答1:

Working demo

The field's value isn't being updated before you catch it, just append the char of key pressed, but String.fromCharCode(event.which) returns the uppercase char if you use keydown so use keypress

$('#field').on('keypress',function(event){
    request=$(this).val() + String.fromCharCode(event.which);
    ...

or you could use

$('#field').on('keyup',function(event){
    request=$(this).val(); // value is ready by now
    ...

but the feedback appears slower because you're waiting for the key to be released

回答2:

It's about the timing. At the time of keydown event, the control hasn't yet received the character - in fact, it's not even sure if it will receive it (since you can block keydown or keypress, and it is only added after it). So when you read the contents of your control, you're doing it too early - it's like trying to eat a hamburger when you decide to go to McDonalds, instead after you go and pay for it.

You can read more about keyboard events here, and in a quite a bit more detail in the spec here.

The solution: this is not what keydown is meant for. Try and see if change event works better for you. EDIT: I meant, catch the characters as they come with the change event. Catch the Enter key with the keydown as you were doing.

来源：https://stackoverflow.com/questions/14031324/keydown-processes-previous-character-instead-of-current-one

标签

jquery

keydown

delayed-execution