web-dev-qa-db-de.com

Ereignis bei einem deaktivierten Eingang

Anscheinend wird ein deaktivierter <input> von keinem Ereignis behandelt

Gibt es eine Möglichkeit, dieses Problem zu umgehen?

<input type="text" disabled="disabled" name="test" value="test" />
$(':input').click(function () {
    $(this).removeAttr('disabled');
})

Hier muss ich auf die Eingabe klicken, um sie zu aktivieren. Wenn ich sie jedoch nicht aktiviere, sollte die Eingabe nicht veröffentlicht werden.

203

Deaktivierte Elemente lösen keine Mausereignisse aus. Die meisten Browser verbreiten ein Ereignis, das von dem deaktivierten Element in der DOM-Baumstruktur ausgeht, sodass Event-Handler auf Containerelemente platziert werden können. Firefox zeigt dieses Verhalten jedoch nicht, es funktioniert einfach gar nicht, wenn Sie auf ein deaktiviertes Element klicken.

Ich kann mir keine bessere Lösung vorstellen, aber um vollständige Browser-Kompatibilität zu erreichen, könnten Sie ein Element vor die deaktivierte Eingabe setzen und den Klick auf dieses Element fangen. Hier ist ein Beispiel von dem, was ich meine:

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

jq:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

Beispiel: http://jsfiddle.net/RXqAm/170/ (aktualisiert, um jQuery 1.7 mit prop anstelle von attr zu verwenden).

234
Andy E

Vielleicht könnten Sie das Feld readonly machen und beim Senden alle readonly-Felder deaktivieren

$(".myform").submit(function(e) {
    $("input[readonly]", this).attr("disabled", true);
});

und die Eingabe (+ Skript) sollte sein

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
    $(this).removeAttr('readonly');
})
62
Tokimon

Deaktivierte Elemente "essen" Klicks in einigen Browsern - sie reagieren weder auf sie, noch erlauben sie, dass sie von Ereignisprozeduren irgendwo auf dem Element oder einem seiner Container erfasst werden.

IMHO ist der einfachste und sauberste Weg, dieses Problem zu "beheben" (wenn Sie tatsächlich Klicks auf deaktivierte Elemente erfassen müssen, wie das OP dies tut), fügen Sie Ihrer Seite einfach folgendes CSS hinzu:

input[disabled] {pointer-events:none}

Dadurch werden alle Klicks auf eine deaktivierte Eingabe auf das übergeordnete Element angewendet, wo Sie sie normal erfassen können. (Wenn Sie mehrere deaktivierte Eingaben haben, möchten Sie möglicherweise jede einzelne in einen eigenen Container einfügen, wenn sie nicht bereits so angeordnet sind, z. B. ein zusätzlicher <span> oder ein <div>) deaktivierte Eingabe wurde angeklickt).


Der Nachteil ist, dass dieser Trick für ältere Browser, die die CSS-Eigenschaft pointer-events nicht unterstützen, leider nicht funktioniert. Es sollte ab IE 11, FF v3.6, Chrome v4) funktionieren: caniuse.com/#search=pointer-events

Wenn Sie ältere Browser unterstützen müssen, müssen Sie eine der anderen Antworten verwenden!

41
Doin

Ich würde eine Alternative vorschlagen - verwenden Sie CSS:

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

anstelle des deaktivierten Attributs. Anschließend können Sie Ihre eigenen CSS-Attribute hinzufügen, um eine deaktivierte Eingabe zu simulieren, jedoch mit mehr Kontrolle.

13
Ron Reiter

$(function() {

  $("input:disabled").closest("div").click(function() {
    $(this).find("input:disabled").attr("disabled", false).focus();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div>
  <input type="text" disabled />
</div>

7
Rejeesh Prarath

Anstelle von disabled können Sie auch readonly verwenden. Mit etwas extra CSS können Sie die Eingabe so gestalten, dass sie wie ein disabled-Feld aussieht.

Es gibt tatsächlich ein anderes Problem. Das Ereignis change wird nur ausgelöst, wenn das Element den Fokus verliert, was bei einem disabled-Feld nicht logisch ist. Wahrscheinlich drängen Sie Daten aus einem anderen Anruf in dieses Feld. Um dies zu erreichen, können Sie das Ereignis 'bind' verwenden.

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});
4
Nykac

ODER mache das mit jQuery und CSS!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

Auf diese Weise wird das Element deaktiviert, und es werden keine Zeigerereignisse ausgelöst. Es kann jedoch weitergegeben werden. Wenn es übergeben wird, können Sie es mit dem Attribut 'ignore' ignorieren.

4
sidonaldson

Wir hatten heute ein solches Problem, aber wir wollten den HTML-Code nicht ändern. Um dies zu erreichen, haben wir mouseenter event verwendet

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');
0
Raul Sanchez