Zeichen wird nicht eingegeben, wenn die Eingabe hat Keydown Event Listener und im Debug-Modus

Question

Ich habe eine Eingabe mit einem Keydown Event Listener. Ich bin neu bei Javascript/html, also vielleicht ist es offensichtlich, aber wenn ich es im Browser ausprobiere funktioniert alles. Ich tippe einen Charakter und ich kann sehen, dass mein Javascript lief und dann tippe ich ein anderes Zeichen und es funktioniert. Aber wenn ich die chrome-Entwicklerwerkzeuge öffne und einen Unterbrechungspunkt in die Ereignis-Listener-Funktion setze, dann erscheint, wenn ich etwas eintippe, es nicht im Eingabeelement, nachdem der Ereignis-Listener fertig ist. Was ist der Grund dafür?

Hier ist mein javascript:

$("#author").keydown(function(event) { 

}); 

und hier ist das HTML-Element:

<input class="form-control" name="author" type="text" id="author"> 

So ist es noch einmal zu versuchen und zu erklären: wenn ich ein Zeichen eingeben (zB "m") Im Eingabeelement erscheint dann der Buchstabe "m" im Eingabeelement. Wenn ich ein anderes Zeichen tippe, erscheint auch dieses. Dann aktualisiere ich die Seite. Ich öffne die Chrome-Entwickler-Tools und lege einen Unterbrechungspunkt auf den Event-Listener. Ich gebe meine Tastatur "m" ein, und der leere Ereignis-Listener läuft und es gibt keine Anzeige auf der Seite, die ich "m" eingegeben habe. Es wird nicht im Eingabeelement angezeigt. Wenn ich den Debug-Punkt entferne, funktioniert es. Ich tippe ein Zeichen und es erscheint im Eingabeelement.

Here ist ein Kinderspiel-Beispiel. Wenn Sie in das Eingabefeld eingeben, funktioniert es. Wenn Sie die Dev-Tools (zumindest in Chrome) öffnen und den js-Interpreter eingeben, wird nichts eingegeben.

Answer 1

Mit grundlegender Eingabe eines Buchstabens, gibt es mehrere Ereignisse, die tatsächlich Feuer (Sie die, die Sie wollen hören, um entscheiden können)

Also, wenn Sie die Buchstaben „M“ in einem Textfeld eingeben Sie Feuer tatsächlich mehrere Ereignisse in der folgenden Reihenfolge:

1. Keydown
2. Keypress
3. keyUp

Wenn Sie die Taste gedrückt halten, werden wiederholt die Ereignisse "down" und "press" ausgelöst.

$("#author").keydown(function(event){ 
 
    var key = event.keyCode || event.charCode; 
 
\t $('#events').append('keydown: ' + key + '<br/>'); 
 
}); 
 
$("#author").keyup(function(event){ 
 
    var key = event.keyCode || event.charCode; 
 
\t $('#events').append('keyup: ' + key + ' value:' + $("#author").val() + '<br/><hr/>'); 
 
}); 
 
$("#author").keypress(function(event){ 
 
\t $('#events').append('keypress: value:' + $("#author").val() + '<br/>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="form-control" name="author" type="text" id="author"> 
 
<div id="events"></div>

Der Trick besteht darin, dass die Debug-Tools offen, obwohl ohne Sie den Wert in dem Feld eingegeben SEE, ist es nicht wirklich, bis das Tastendruckereignis ausgelöst eingegeben wird. Wenn Sie jedoch einen Unterbrechungspunkt festgelegt haben oder nie vom Ereignis "Keydown" zurückkehren, wird die Presse nie ausgeführt, und das Feld wird nie aktualisiert, um das angehängte Zeichen aufzunehmen.