Keydown processes previous character instead of cu

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.

标签： jquery keydown delayed-execution

2条回答

够拽才男人

2楼-- · 2019-06-14 08:22

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.

0人赞添加讨论(0) 举报

再贱就再见

3楼-- · 2019-06-14 08:26

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

0人赞添加讨论(0) 举报

Keydown processes previous character instead of cu

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间