Fieldset und Deaktivieren aller untergeordneten Eingaben - Umgehung für IE

Question

Ich habe ein Feldset, das eine ui-Ansicht enthält.
Jede Ansicht hatte viele Felder (ein Feld ist eine Direktive, die eine Eingabe umschließt).

Es sieht ungefähr so ​​aus:

<fieldset ng-disabled='myCondition'> 
    <div ui-view></div> // this changes with lot's of fields that look like <div field='text-box'></div> 
</fieldset> 

Nun, das hat super funktioniert, sind die Felder auf allen Browsern außer IE deaktiviert bekommen.
Ich habe etwas Google gemacht und gesehen, dass das nicht unterstützt Fieldset + deaktiviert und ich bin auf der Suche nach einem schnellen Workaround.

Ich habe einige Dinge ausprobiert, die nahe waren, aber nicht perfekt und ich nehme an, ich bin nicht der erste, der eine Lösung braucht (auch wenn ich nicht alles auf Google gefunden haben).

Answer 1

hatte ich genau das gleiche Problem, und ich kam mit dieser Richtlinie bis:

angular.module('module').directive('fieldset', function() { 
    return { 
     restrict: 'E', 
     link: function (scope, element, attrs) { 

      if (angular.isUndefined(element.prop('disabled'))) { //only watch if the browser doesn't support disabled on fieldsets 
       scope.$watch(function() { return element.attr('disabled'); }, function (disabled) { 
        element.find('input, select, textarea').prop('disabled', disabled) 
       }); 
      } 
     } 
    } 
}); 

Die Funktion erkennt allerdings fehlerhaft ist. Auf IEs scheint das Fieldset-Element (alle Elemente, die es tatsächlich zu haben scheint) eine Eigenschaft "disabled" zu haben, die nur auf false gesetzt ist.

Edit: ich habe gerade festgestellt, dass es in einem 'ng-view' ist. Möglicherweise müssen Sie sich mit $ Timeouts herumschlagen, damit die Änderungen nach dem Laden der Ansicht übernommen werden. Oder, noch einfacher, platzieren Sie das Fieldset in der Ansicht.

Answer 2

Scheint, wie damit zusammenhängende Fragen zu IE, siehe this und damit verbundene (sorry, nicht mehr als 2 Links veröffentlichen können noch) nicht. Der erste wird in der nächsten großen IE-Version (Edge?) Behoben werden. Der zweite ist noch geöffnet.

Wie ich vermute, das Problem ist, dass Benutzer immer noch auf Eingaben innerhalb deaktiviert Feldset klicken und sie bearbeiten können.

Wenn ja, gibt es „css nur“ Abhilfe für IE 8+, die über deaktiviert Fieldset transparentes Overlay erstellt, die Fieldset aus angeklickt verhindert.

Die Problemumgehung wird in Microsoft Connect-Problemen beschrieben.

Es gibt fiddle, die Problemumgehung in Aktion zeigt.

fieldset { 
    /* to set absolute position for :after content */ 
    position: relative; 
} 
/* this will 'screen' all fieldset content from clicks */ 
fieldset[disabled]:after { 

    content: ' '; 
    position: absolute; 
    z-index: 1; 
    top: 0; right: 0; bottom: 0; left: 0; 
    /* i don't know... it was necessary to set background */ 
    background: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==); 
} 

Die Problemumgehung weist einige Einschränkungen auf, siehe Code für Details.

Es gibt einige Optionen mit JavaScript.

Scheint wie für IE9 + Sie mousedown- Ereignisse auf Fieldset und rufen e.preventDefault fangen kann(), wenn Fieldset deaktiviert ist.

fieldset.onmousedown = function(e) { 

    if (!e) e = window.event; 

    if (fieldset.disabled) { 

     // for IE9+ 
     if (e.preventDefault) { 

      e.preventDefault(); 
     } 
     // for IE8- 
     else { 

      // actualy does not work 
      //e.returnValue = false; 
     } 

     return false; 
    } 
} 

Für IE8 und darunter ist imposible auf deaktiviert Fieldset, Event-Handler nicht einmal aufgerufen wird, nicht sprudelnden mousedown- Ereignisse zu fangen. Aber es ist möglich, sie auf Fieldset-Vorfahren zu finden, beispielsweise auf documetn.body. Aber noch einmal, für IE8 können Sie nicht verhindern, dass das Element fokussiert wird, indem Sie die Standardaktion des Mousedown-Ereignisses verhindern. Einzelheiten finden Sie unter jQuery-Ticket # 10345 (mehr als 2 Links können nicht hochgeladen werden). Sie können versuchen, das Attribut UNSELECTABLE zu verwenden, um das Element temporary zu verbieten, um den Fokus zu erhalten.Etwas wie folgt aus:

document.body.onmousedown = function(e) { 

    if (!e) e = window.event; 

    var target = e.target || e.srcElement; 

    if (fieldset.contains(target) && fieldset.disabled) { 

     // no need to do this on body!!! do it on fieldset itself 
     /*if (e.preventDefault) { 

      e.preventDefault(); 
     } 
     else {*/ 

      // this is useless 
      //e.returnValue = false; 

      // but this works 
      fieldset.setAttribute("UNSELECTABLE", "on"); 

      window.setTimeout(function() { target.setAttribute("UNSELECTABLE", ""); },4); 
     /*}*/ 

     return false; 
    } 
} 

Answer 3

Obwohl Status ist fixed in Microsoft documentation Ausgabe noch nicht behoben!

Aber jetzt können wir auch pointer-events: none; verwenden. Es werden alle Eingabeelemente deaktivieren

fieldset[disabled] { 
    pointer-events: none; 
} 

Answer 4

/* this is a fix to disable fieldsets in IE11 https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled */ /* https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */ _:-ms-lang(x), fieldset[disabled].ie10up { pointer-events: none; opacity: .65; }