Event Control mit KeyPress 'Tab'

Question

So habe ich mehrere Eingabeformulare, die deaktiviert sind, bis sie aufgrund von Datenaufrufen an den Server aufgrund ihrer Auswahl nacheinander ausgefüllt werden. Ich habe ein benutzerdefiniertes Dropdown-Menü, mit dem ich einen Tipp machen und auf das gewünschte Element klicken kann. Wenn ich auf das Element klicke, wird das Feld mit einer Kombination aus onblur- und onchange-Ereignissen geöffnet, die für mein Datenmodell stattfinden. Das Problem, das für mich ins Spiel kommt, ist, dass ich möchte, dass der Benutzer Tabs erstellen kann. Aber wenn ich auf Tab klicke, haben Onblur und Onchange das Feld nicht deaktiviert, so dass es mehrere Felder überspringt, die es nicht sollte. Gibt es irgendwelche Vorschläge zum Verhindern, dass ein Tab-Tastendruck das deaktivierte Element überspringt? Kann ich auf ein deaktiviertes Element zugreifen?

Answer 1

das nicht möglich ist, da die Dokumentation sagen:

Eine Form Steuerung deaktiviert wird, wenn seine disabled-Attribut gesetzt ist, oder wenn es ein Nachkomme eines Fieldset Element, dessen disabled-Attribut gesetzt ist, und ist nicht ein Nachfolger des ersten Legendenelements des Fieldset-Elements, sofern vorhanden.

Ein Formularsteuerelement, das deaktiviert ist muss verhindern, dass alle Klickereignisse, die für die Benutzerinteraktionsaufgabenquelle in der Warteschlange stehen, für das Element ausgelöst werden.

Sie können also nicht auf diese Elemente klicken, und Sie können Element nicht fokussieren, das nicht angeklickt werden kann.

https://www.w3.org/TR/html5/forms.html#concept-fe-disabled

So ist die einzige Option, wenn Sie benötigen konzentriert sich dieser Elemente zu ermöglichen, nicht disabled Attribut überhaupt zu benutzen. Sie können stattdessen die Klasse .disabled verwenden und die Schlüsselereignisse binden, um die Bearbeitung des Werts zu unterdrücken.

Answer 2

Sie bereit sind, Unter der Annahme, vorübergehend das deaktivierte Element zu ermöglichen (also es beschreibbar machen), kann dies durch die Überprüfung erfolgen, ob die next element die disabled attribute mit hasAttribute() hat. Wenn dies der Fall ist, können Sie dieses Attribut in falseändern, bevor die keydowntrue zurückgibt, und somit wird die keyup Registerkarte auf das deaktivierte Element.

Zusätzlich können Sie ein neues Attribut wasDisabled setzen, mit dem Sie dann gegen $(this)[0] überprüfen können. Wenn das Element diese Klasse hat, können Sie das Element erneut deaktivieren, sobald Sie es erneut ablegen.

Dies kann in der folgenden jQuery Beispiel zu sehen:

$('input').on('keydown', function(e) { 
 
    if (e.keyCode == 9) { 
 
    if ($(this).next()[0].hasAttribute('disabled')) { 
 
     $(this).next().attr('disabled', false); 
 
     $(this).next().attr('wasdisabled', true); 
 
    } 
 
    if ($(this)[0].hasAttribute('wasdisabled')) { 
 
     $(this).attr('disabled', true); 
 
    } 
 
    } 
 
});

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

 
<input> 
 
<input disabled> 
 
<input>

hoffe, das hilft! :)

Answer 3

Ich landete es auf eine schreibgeschützte Eigenschaft. Das readonly erlaubte mir, zu ihm zu tappen und mich darauf zu konzentrieren, während ich es nicht eintippen konnte, bis die Unschärfe und die Änderung vervollständigt wurden.