Fieldset e disattivazione di tutti gli input secondari - Work around per IE

Question

Ho un fieldset che ha una vista ui sotto di esso.
Ogni vista aveva molti campi (un campo è una direttiva che racchiude un input) sotto di esso.

Sembra qualcosa di simile a questo:

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

Ora, questo ha funzionato grande, i campi diventano disattivato su tutti i browser tranne IE .
Ho fatto un po 'di google e ho visto che, ad esempio, non supporta fieldset + disabled e sto cercando una soluzione rapida.

Ho provato alcune cose che erano vicine ma non perfette e presumo di non essere il primo ad aver bisogno di una soluzione (anche se non ho trovato nulla su google).

Answer 1

ho avuto lo stesso identico problema, e mi si avvicinò con questa direttiva:

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) 
       }); 
      } 
     } 
    } 
}); 

La funzione di rilevare è viziata però. Su IE sembra che l'elemento fieldset (tutti gli elementi in realtà sembra) abbia una proprietà 'disabled' che è appena impostata su false.

Modifica: ho appena realizzato che è all'interno di una 'ng-view'. Potrebbe essere necessario fare i conti con $ timeout per ottenere l'applicazione delle modifiche dopo il caricamento della vista. Oppure, ancora più semplice, posiziona il fieldset all'interno della vista.

Answer 2

Sembra collegato a problemi di IE, vedere this e relativo (purtroppo non è possibile pubblicare più di 2 collegamenti). Il primo verrà corretto nella prossima versione di IE (Edge?). Il secondo è ancora aperto.

Come sospetto, il problema è che l'utente può ancora fare clic sugli input all'interno del campo disattivato e modificarli.

In tal caso, esiste una soluzione alternativa "css only" per IE 8+ che crea una sovrapposizione trasparente sopra il fieldset disattivato che impedisce di fare clic sul fieldset.

La soluzione alternativa è descritta nei problemi Microsoft Connect.

C'è fiddle, che dimostra una soluzione alternativa.

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==); 
} 

La soluzione alternativa presenta alcune limitazioni, vedere il codice per i dettagli.

Ci sono alcune opzioni con JavaScript.

Sembra per IE9 + è possibile rilevare gli eventi mouse sul fieldset e chiamare e.preventDefault() se fieldset è disabilitato.

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; 
    } 
} 

per IE8 e sotto di essa è imposible per la cattura di ribollimento eventi MouseDown su disabilitato fieldset, gestori di eventi non ha nemmeno viene chiamato. Ma è possibile catturarli su antenati fieldset, su documetn.body per exampe. Ma ancora una volta, per IE8- non è possibile impedire che l'elemento venga focalizzato impedendo l'azione predefinita dell'evento di mouse. Vedi il biglietto jQuery # 10345 per i dettagli (mi dispiace, non posso pubblicare più di 2 link). Puoi provare a usare l'attributo UNSELECTABLE all'elemento non valido temporaneo per ottenere l'attenzione.Qualcosa di simile a questo:

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

stato Anche se è fixed in Microsoft documentation Problema ancora non risolto!

Ma, ora possiamo anche usare pointer-events: none;. Sarà disabilitare tutti gli elementi di input

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; }