Code ausführen, sobald das Formular zurückgesetzt wurde

Question

Wie kann ich einen Code ausführen, sobald ein Formular zurückgesetzt wurde?

Die reset Ereignis ausgelöst wird vor die Formularfelder auf die Standardwerte zurückgesetzt erhalten. So zum Beispiel:

$('form').on('reset', function(e) { 
    $('input').val('a value that should be set after the form has been reset'); 
}); 

Das wird nicht funktionieren. (Demo)

Da die reset Ereignis ausgelöst wird, bevor der Browser das Standardformular Reset Verhalten behandelt, setzt der Code oben einfach die Eingabe des value direkt vor die Standardaktion der reset Ereignis stattfindet, die Wiederherstellung der Wert des Eingangs auf den Standardwert. Dies ist sinnvoll, da ich e.preventDefault() anrufen könnte, um das Zurücksetzen des Formulars abzubrechen.

Mein Anwendungsfall erfordert die Ausführung von Code, sobald das Formular zurückgesetzt wurde. In einfachen Fällen wäre ein setTimeout genügen:

$('form').on('reset', function(e) { 
    setTimeout(function() { 
     $('input').val('yay it works now'); 
    }, 0); 
}); 

Dies funktioniert, da die setTimeoutirgendwann in der Zukunft ausgeführt wird, nachdem der reset sprudelnden und der Browser seine Standardaktion behandelt beendet hat.

jedoch verliert diese Synchronizität. Sobald ich das Formular programmgesteuert zurücksetzen und von einem anderen Ort manipulieren muss, geht alles in den Abgrund.

$('form').on('reset', function(e) { 
    setTimeout(function() { 
     $('input').val("reset'd value"); 
    }, 0); 
}); 

//somewhere in another module.. 
$('form').trigger('reset'); 
$('input').val('value after resetting the form'); 

(Demo)

Natürlich ist alles soll synchron passieren, aber nur meine reset Ereignisbehandlung geschoben asynchron in der Zukunft zu führen, so dass es am Ende laufen, nachdem alle der aktuellen synchronen Stapel Der Code wurde ausgeführt, als er direkt nach dem Zurücksetzen des Formulars ausgeführt werden sollte.

Lösungen ich gedacht habe:

• Nutzung noch eine weitere setTimeout nach dem setTimeout laufen. Das ist übermäßig hässlich und ich weigere mich, in eine Hölle zu springen.
• Implementieren Sie einen Wrapper zum Zurücksetzen des Formulars, das entweder eine Rückruffunktion übernimmt oder ein Zusicherungsobjekt zurückgibt. Das scheint ein bisschen übertrieben zu sein.

Wenn nur ein afterreset Ereignis existiert .. Nun hat ich übersehen, etwas oder sind die Lösungen über meiner einzige Option?

---

Ich habe stieß auf diese Fragen bei der Suche:

• Call a function after form reset
• Perform Javascript action after reset button handles click

Aber ihre Titel sind (imho) ein wenig irreführend, wie die tatsächlich sehen sind sehr weit von meinem Problem entfernt.

Answer 1

In Ihrem Fall, ich denke, Sie einfach nur einen Standardwert Ihrer Textbox zuweisen. Wenn das Formular zurückgesetzt wird, wird es vom Browser automatisch auf den Standardwert zurückgesetzt.

<form> 
    <input value="Abc" type="text"/> 
    <input type="reset" /> 
</form> 

prüfen demo.