Ein- (keypress-) Ereignisverzögerung zwischen der Eingabe und Ausgabe von JavaScript

Das folgende Snippet reproduziert den Eingabetext in der Webseite unter Verwendung von einfachem javaScript und jQuery.Ein- (keypress-) Ereignisverzögerung zwischen der Eingabe und Ausgabe von JavaScript

ich mich, aber, wie kommt es ein ein Zeichen ist (oder genauer gesagt: ein Tastendruck) Latenz zwischen dem Eingang und dem Ausgang

zB:

I 'eingeben abcde‘
der Ausgang 'abcd'
aber wenn ich die in der Presse Sert Key, das ultimative "e" druckt.

Mein Code:

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

Jede Idee? Danke

Quelle

2016-07-07 marsupilam

Sie greifen den Wert, bevor Sie das Ereignis bis zu der Stelle, an der das Textfeld aktualisiert wurde, erlaubt haben. Sie können eine infinitesimale Verzögerung hinzufügen, um den vollen Wert zu erhalten:

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

Quelle

2016-07-07 19:46:18

Ja toll, das die schnellste Reaktion fix unter den folgenden Lösungen zu sein scheint: keyup/keydown/Timeout – marsupilam

Sie sollten nur Verwenden Sie das Keyup-Ereignis anstelle des Tastendrucks mit einem Timeout. Das ist nur dumm. –

Wenn Sie die tat Latenz loswerden wollen. verwenden keyup oder keydown statt keypress:

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

Hier ist die DEMO

Quelle

2016-07-07 19:46:40

'keydown' hat das gleiche Problem wie' keypress', zumindest in Chrome: https://jsfiddle.net/mmojdaqe/ – Timo

Der Grund, warum ich keyup in meinen Beispielen verwendet habe, ist das. –

Ich weiß, nur darauf hinweisen, da Sie im zweiten Satz vorschlagen, "Keydown" zu verwenden. :-) – Timo

ist der wahrscheinlichste Grund ist, dass die keypress Event-Handler, bevor der Inhalt des Eingabefeldes ausgeführt wird, aktualisiert wird. Wenn Sie den Inhalt lesen, lesen Sie immer noch den alten Inhalt, nicht den aktualisierten Inhalt.

Von jQuery keypress docs:

Hinweis: Da das Tastendruck-Ereignis nicht durch eine offizielle Spezifikation, das tatsächliche Verhalten abgedeckt angetroffen wird bei der Verwendung kann es in allen Browsern, Browser-Versionen und Plattformen unterscheiden.

Mit keyup stattdessen behebt das Problem:

$("#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>

Quelle

2016-07-07 19:51:19 Timo

Ein- (keypress-) Ereignisverzögerung zwischen der Eingabe und Ausgabe von JavaScript

Antwort

Verwandte Themen