JavaScript輸入和輸出之間的一個（按鍵事件）延遲

以下片段使用簡單的javaScript和jQuery來重現網頁中的輸入文本。JavaScript輸入和輸出之間的一個（按鍵事件）延遲

我很納悶，不過，怎麼來的還有一個字符（或者更確切地說：一個按鍵）：

我輸入'輸入和輸出

如之間的延時ABCDE」

輸出是 'ABCD'

但是如果我按在sert鍵，最終的'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

你應該只使用keyup事件而不是按鍵超時。這太愚蠢了。 –

如果您想擺脫tat延遲。使用keyup或，而不是keypress：

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

這裏是DEMO

來源

2016-07-07 19:46:40

'keydown'與'keypress'有相同的問題，至少在Chrome中是這樣的：https://jsfiddle.net/mmojdaqe/ – Timo

我在我的示例中使用了keyup的原因是。 –

我知道，只是指出它，因爲你建議在第二句中使用'keydown'。 :-) – Timo

最可能的原因是輸入字段的內容更新之前的keypress事件處理程序被執行。當你閱讀內容時，你仍然閱讀舊內容，而不是更新內容。

從jQuery的keypress docs：

注：如不屬於任何正式規範的按鍵事件，使用它可以跨瀏覽器，瀏覽器版本和平臺差異時所遇到的實際行爲。

使用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輸入和輸出之間的一個（按鍵事件）延遲

回答

相關問題