0

jquery と ajax を使用して MS-Dos エミュレーション ウィンドウを作成しようとしています。うまく機能しますが、単語を入力するかEnterキーを押すと、スクリプトの表示が1文字遅すぎます（最初のプレスでは文字が表示されず、次のキーダウンごとに、現在の文字ではなく、ユーザーが入力した前の文字が表示されます）。

これが私のスクリプトの簡略版です：

<!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>

これを変更すると、必要なときに「keyDown」が起動されると確信しています

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

これに

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

...「x」は最初のキーダウンの直後に表示されますが、「リクエスト」コンテンツは次のキーダウンまで遅れます (たとえば、「a」と入力すると、「x」のみが表示され、入力すると「b」の直後、「ax」などが表示されます...）。

したがって、キーダウンを発射することではなく、適切なタイミングで適切なキャラクターを選択することが重要です.

私は何を間違っていますか？

ありがとうございました。

4

2 に答える 2

3

ワーキングデモ

フィールドの値は、キャッチする前に更新されません。押されたキーの文字を追加するだけですが、使用するString.fromCharCode(event.which)場合は大文字の文字を返しますkeydownkeypress

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

またはあなたが使用することができます

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

ただし、キーが解放されるのを待っているため、フィードバックは遅く見えます

于 2012-12-25T14:17:52.190 に答える
2

タイミングについてです。イベントの時点ではkeydown、コントロールはまだ文字を受け取っていません。実際、それを受け取るかどうかさえわかりません (keydownまたはをブロックすることができkeypress、その後にのみ追加されるため)。したがって、コントロールの内容を読むときは、早すぎます。マクドナルドに行くと決めたときにハンバーガーを食べようとするようなものです。

キーボード イベントの詳細については、こちらを参照してください。仕様の詳細については、こちらを参照してください。

解決策: これkeydownは意図したものではありません。changeイベントがうまく機能するかどうか試してみてください。編集: つまり、イベントに登場するキャラクターをキャッチするということchangeです。あなたがしていたように、Enterキーをキャッチしkeydownます。

于 2012-12-25T14:10:31.363 に答える