/ / Wie kann ich unbehandelte Tastendrücke an ein bestimmtes Eingabefeld senden? - javascript, jquery, javascript-events

Wie kann ich unbehandelte Tastendrücke an ein bestimmtes Eingabefeld senden? - Javascript, Javascript, Javascript-Ereignisse

Ich versuche folgendes, scheinbar einfaches zu tun.

Wenn eine Taste gedrückt wird, die ein Zeichen in ein Texteingabefeld eingegeben hätte, und dieser Tastendruck nicht bereits an anderer Stelle behandelt wird (z. B. hatte kein Eingabefeld den Fokus), dann fokussiere ein bestimmtes Eingabefeld und tippe das Zeichen dort ein.

Dies dient dazu, Benutzern einen Mausklick in einem Browser zu ersparenSpiel, das schnelle Antworten erfordert, aber genauso gut in einer Chat-Anwendung verwendet werden kann. Wenn der Benutzer versehentlich vergessen hat, dieses (große und offensichtliche) Eingabefeld zu fokussieren, dann möchte ich dies anmutig handhaben und sie nicht bestrafen.

Vorbehalte:

  • Wenn ein Eingabefeld den Fokus hat, sollte das Ereignis dorthin und nirgendwo anders gehen.
  • Tasten, die keine Zeichen eingeben (Eingabe, Pfeiltasten, PgUp, PgDn, ...), sollten belassen werden, um das Standardverhalten zu übernehmen.

Mit jQuery habe ich mir so etwas ausgedacht:

$(document).keypress(function(e) {
var input = $("#my-input-field");
if (e.which >= " " && !input.is(":focus")) {
input.focus();
input.trigger(e);
e.preventDefault();
}
});

Dies funktioniert jedoch aus zwei Gründen nicht:

  1. Ereignisse sprudeln immer noch vor document auch wenn ein bestimmtes Eingabefeld damit umgeht. Mögliche Lösungen:
    • Anschließen keypress Ereignishandler für alle Eingabefelder und Aufrufe stopPropagation in jedem, aber das klingt nach einem schrecklichen Hack, der darauf wartet, schief zu gehen.
    • Überprüfen Sie im obigen Handler, ob ein Eingabefeld aktuell den Fokus hat, und ignorieren Sie es, wenn dies der Fall ist, aber das klingt, als würde mir ein Eckfall fehlen, in dem etwas anderes die Tastendrücke verwendet.
  2. Berufung .trigger(e) funktioniert nicht. Es ruft meine benutzerdefinierten Ereignishandler auf, löst jedoch die Defaut nicht aus keypress Verhalten beim Einfügen des Zeichens.

Was ist der sauberste Ausweg?

Antworten:

5 für die Antwort № 1

Wenn Sie darüber nachdenken, werden die Ereignisse in dieser Reihenfolge ausgelöst: keydown, keyup, keypress.

Sie können etwas wie verwenden:

$(document.body).on("keydown", function(e) {
if(document.activeElement.tagName.toLowerCase() != "input") {
$("#my-default-input").focus();
}
});

Dann endet das Keydown-Ereignis, späterLösen Sie das Keyup-Ereignis (auf dem jetzt fokussierten Feld) aus und schreiben Sie das Zeichen in das Feld. Lösen Sie dann das Keypress-Ereignis aus, das andere Ereignisse (falls vorhanden), die mit dem Feld verknüpft sind, verwenden können.

Der Inhalt der if-Anweisung kann geändert werden, um bestimmte Tastendrücke herauszufiltern oder andere Tags hinzuzufügen, z <canvas> zur Liste "Nicht anfassen".

Beachte auch, dass ich das nicht getestet habe, aber es sollte theoretisch funktionieren. :)


1 für die Antwort № 2

Sie können einen Tastendruck für einen Benutzer nicht manuell auslösen (potenzielle Sicherheitsverletzung) trigger() In diesem Fall werden alle Ereignislistener ausgelöst, die dem Tastendruckereignis zugewiesen sind. Sie können den Wert des Textfelds mithilfe von .val () ändern. Fügen Sie einfach den Charakter hinzu.

Sie können mit testen, ob der Tastendruck in einem Textfeld erfolgt ist if($(e.target).is("input")) im Dokument-Tastendruck-Listener. Sie können auch einen Scheck hinzufügen "textarea" wenn Sie wünschen.