Deaktiviertes Attribut onClick eines deaktivierten Formularfeldes entfernen

Question

Ich habe ein Formularfeld, das zu Beginn deaktiviert ist und mit einem onClick aktiviert wird. Die onClick nicht Feuer (zumindest in FF) noch tut eine einfache alert(1);.

Die hacky Version ist ein gefälschtes Formularfeld an seiner Stelle, die "aussieht" wie es deaktiviert ist (ausgegraut Stil) und onClick, verstecken Sie es und zeigen das richtige Feld aktiviert, aber das ist hässlich.

Beispiel Code

Das funktioniert:

<input type="text" id="date_end" value="blah" onClick="this.disabled=true;">

Das funktioniert:

<label for="date_end_off" onClick="document.getElementById('date_end').disabled=false">Test</label>
<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

Dies schlägt fehl:

<input type="text" id="date_end" value="blah" onClick="alert(1);" disabled>

Dies schlägt fehl:

<input type="text" id="date_end" value="blah" onClick="document.getElementById('date_end').disabled=false" disabled>

Answer 1

Ich bin in einem anderen Forum auf diesen Thread gestoßen, also werde ich wohl anders vorgehen müssen.

http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox und vielleicht auch andere Browser, DOM-Ereignisse für Formularfelder deaktivieren, die deaktiviert sind. Jedes Ereignis, das bei dem deaktivierten Formularfeld beginnt, wird vollständig vollständig abgebrochen und pflanzt sich nicht in der DOM-Baum. Korrigieren Sie mich, wenn ich falsch liege, aber wenn Sie auf die deaktivierte Schaltfläche klicken, ist die Quelle des Ereignisses der deaktivierte Schaltfläche und das Klickereignis wird vollständig ausgelöscht. Der Browser weiß buchstäblich nicht, dass die Schaltfläche angeklickt wurde, noch gibt er das Click Ereignis weiter. Es ist, als würden Sie auf ein auf ein schwarzes Loch auf der Webseite klicken.

Abhilfe:

1. Gestalten Sie die Datumsfelder so, dass sie aussehen, als ob sie deaktiviert sind.
2. Ein verstecktes Formularfeld "use_date" erstellen mit einem Bit-Wert, um zu bestimmen ob die Datumsfelder bei der Verarbeitung verwendet werden sollen.
3. Neue Funktion zu onClick der Datumsfelder hinzufügen, die die Stilklasse so ändert, dass sie erscheint aktiviert und den Wert "use_date" auf auf 1 setzt.

Answer 2

Verwenden Sie readonly 代わりに disabled

Zumindest für Kontrollkästchen bedeutet dies, dass sie siehe deaktiviert, verhalten sich aber normal (getestet mit Google Chrome). Sie müssen den Klick abfangen und ggf. die Standardaktion des Ereignisses verhindern.

Answer 3

Mit jQuery, füge ich ein Ereignis-Handler, um die Eltern meiner Eingabe-Steuerelemente.

<script type="text/javascript">
    $(function() {
        // disable all the input boxes
        $(".input").attr("disabled", true);

        // add handler to re-enable input boxes on click
        $("td:has(.input)").click(function() {
            $(".input", this).removeAttr("disabled");
        });
    });
</script>

Alle meine Eingabesteuerelemente haben die Klasse "input" und sie befinden sich in ihren eigenen Tabellenzellen. Wenn Sie zumindest Ihre Eingabe-Tags in einem div eingewickelt, dann sollte dies auch ohne eine Tabelle funktionieren.

Answer 4

Unter Quirksmode.org :

"Ein Klick-Ereignis auf ein deaktiviertes Formularfeld löst in Firefox und Safari keine Ereignisse aus. Opera löst die Mousedown- und Mouseup-Ereignisse aus, aber nicht das Click-Ereignis. IE löst Mousedown- und Mouseup-Ereignisse aus, aber keinen Klick auf das Formular. Alle diese Implementierungen werden als korrekt angesehen."

Die Kompatibilitätstabelle von Quirksmode ist sehr hilfreich, um mehr über solche Probleme herauszufinden.

Answer 5

Ich hatte vor kurzem ein sehr ähnliches Problem und löste es, indem ich die Eingabe in ein div platzierte und das onClick in das div verschob.

<div onClick="myEnableFunction('date_end');">
<input type="text" id="date_end" value="blah" disabled>
</div>