JavaScript入力と出力の間の1回の（キー押し）イベント遅延

次のスニペットは、単純なjavaScriptとjQueryを使用してWebページの入力テキストを再現します。JavaScript入力と出力の間の1回の（キー押し）イベント遅延

私は 'と入力：入力と

は、例えば出力間のレイテンシ：私は疑問に思って

、しかし、どのように1つの文字（1つのキーストロークまたはより正確には）ありきABCDE」

出力された '私はでを押すと、しかしABCD'

セルトキー、究極の「e」プリント。

マイコード：

<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <input type="text" name="enteredText" id="myTextInput" /> <p id="myTextOutput"> blabla </p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $("#myTextInput").keypress(function(){ var theText = $("#myTextInput").val(); $("#myTextOutput").html(theText); }); $("html").click(function(event) { var value = $("#myTextInput").val(); $("#myTextOutput").html(value); }); </script> </body> </html>

任意のアイデア？ありがとう

出典

2016-07-07 marsupilam

イベントがテキストフィールドが更新されたところまで伝播することを許可する前に、値を取得しています。あなたは無限の遅延を加えて完全な値を得ることができます：

$("#myTextInput").keypress(function(){ 
    setTimeout(function() { 
     var value = $("#myTextInput").val(); 
     $("#myTextOutput").html(value); 
    }, 0); 
    });

出典

2016-07-07 19:46:18

偉大なうん、これは次の解決策の中で最速の応答の修正のようだ：keyUpイベント/ KeyDownイベント/タイムアウト – marsupilam

あなたがすべきだけkeypressの代わりにkeyupイベントをタイムアウトとともに使用してください。それはちょうど愚かです。 –

タトレイテンシーを取り除きたい場合は、代わりにkeypressのkeyupまたはを使用します。ここでは

$("#myTextInput").keyup(function(){ 
    var value = $("#myTextInput").val(); 
    $("#myTextOutput").html(value); 
    });

は、最も可能性が高い理由は、入力フィールドの内容が更新される前にkeypressイベントハンドラが実行されていることであるDEMO

出典

2016-07-07 19:46:40

'keydown'は、少なくともChromeで、' keypress'と同じ問題があります：https://jsfiddle.net/mmojdaqe/ – Timo

私のサンプルでkeyupを使用した理由はそれです。 –

2番目の文で 'keydown'を使うことを提案して以来、私はそれを指摘しています。 :-) – Timo

です。コンテンツを読むと、更新されたコンテンツではなく、古いコンテンツが読み込まれます。 jQueryのkeypress docsから

：

注：KeyPressイベントは、任意の正式な仕様で覆われていないとして、実際の動作は、使用している場合、それは、ブラウザ、ブラウザのバージョン、およびプラットフォーム間で異なる場合がありますが発生しました。代わりにkeyupを使用して

は問題が修正されます。

$("#myTextInput").keyup(function() { 
 
    var theText = $("#myTextInput").val(); 
 
    $("#myTextOutput").html(theText); 
 
    }); 
 

 
    $("html").click(function(event) { 
 

 
    var value = $("#myTextInput").val(); 
 
    $("#myTextOutput").html(value); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" name="enteredText" id="myTextInput" /> 
 

 
<p id="myTextOutput"> 
 
    blabla 
 
</p>

出典

2016-07-07 19:51:19 Timo

JavaScript入力と出力の間の1回の（キー押し）イベント遅延

答えて

関連する問題