Подтвердить что ты не робот

Fieldset и отключение всех дочерних элементов - Работайте в IE

У меня есть набор полей, в котором есть ui-view.
В каждом представлении было много полей (поле - это директива, которая обертывает вход) под ним.

Это выглядит примерно так:

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

Теперь это сработало отлично, поля отключены во всех браузерах , кроме IE.
Я сделал несколько google и увидел, что ie не поддерживает fieldset + отключен, и я ищу быстрое обходное решение.

Я пробовал некоторые вещи, которые были близки, но не идеальны, и я полагаю, что я не первый, который нуждается в решении (хотя я не нашел ничего в google).

4b9b3361

ОТВЕТЫ

Ответ 1

Похоже, что это связано с проблемами IE, см. этот и связанный (извините, не могу разместить более двух ссылок). Первый будет исправлен в следующем выпуске IE (Edge?). Второй все еще открыт.

Как я подозреваю, проблема в том, что пользователь все еще может щелкнуть по входам внутри отключенного поля и отредактировать их.

Если это так, существует обходной путь "css only" для IE 8+, который создает прозрачную надпись над отключенным набором полей, которая не позволяет щелкнуть на элементе fieldset.

Обходной путь описан в проблемах Microsoft Connect.

Существует fiddle, который демонстрирует обходное решение в действии.

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

Обходной путь имеет некоторые ограничения, см. код для подробностей.

Есть несколько вариантов использования JavaScript.

Похоже, что для IE9 + вы можете перехватывать события mousedown в полевом наборе и вызывать e.preventDefault(), если параметр fieldset отключен.

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

Для IE8 и ниже невозможно поймать пузырящиеся события mousedown на отключенном наборе fieldset, обработчики событий даже не вызываются. Но их можно поймать на полевых предках, на документе .body для примера. Но опять же, для IE8 - вы не можете предотвратить фокусировку элемента, предотвращая действие по умолчанию mousedown. См. JQuery ticket # 10345 для получения дополнительной информации (извините, не могу разместить более двух ссылок). Вы можете попытаться использовать атрибут UNSELECTABLE для временного запрещающего элемента, чтобы получить фокус. Что-то вроде этого:

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

Ответ 2

У него есть 1 линия решение сейчас.

,

Хотя статус fixed в документации Microsoft. Проблема все еще не решена!

Но теперь мы также можем использовать pointer-events: none; , Это отключит все элементы ввода

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

Ответ 3

У меня была такая же проблема, и я придумал эту директиву:

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

Однако обнаружение функции является ошибочным. В IE кажется, что элемент fieldset (все элементы, которые, по-видимому, на самом деле) имеют свойство "disabled", которое просто установлено в false.

Изменить: я только понял, что он находится внутри "ng-view". Возможно, вам придется обходиться с $timeouts, чтобы заставить его применить изменения после загрузки представления. Или, что еще проще, разместите набор полей внутри представления.