Fieldset和禁用所有子输入 - 解决IE问题

Question

我有一个在其下面有ui-view的fieldset.
每个视图都有很多字段(字段是包装输入的指令).

它看起来像这样:

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

现在,这很好用,除IE之外的所有浏览器都禁用字段.
我做了一些谷歌,看到即不支持fieldset +禁用,我正在寻找一个快速的解决方法.

我尝试了一些接近但不完美的事情,我认为我不是第一个需要解决方案的人(即使我没有在谷歌上找到任何东西).

Answer 1

似乎与IE问题相关,请参阅此相关内容(抱歉,还不能发布超过2个链接).第一个将在下一个主要IE版本(Edge？)中修复.第二个仍然开放.

我怀疑,问题是用户仍然可以点击禁用字段集内的输入进行编辑.

如果是这样,IE 8+的"仅css"解决方法会在禁用的字段集上方创建透明覆盖,以防止单击字段集.

Microsoft Connect问题中描述了解决方法.

有小提琴,演示了行动中的解决方法.

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 +,您可以捕获fieldset上的mousedown事件,并在禁用fieldset时调用e.preventDefault().

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及以下版本,在禁用的fieldset上捕获冒泡的mousedown事件是不可能的,甚至不会调用事件处理程序.但是可以在documetn.body上找到它们在fieldset祖先上的例子.但同样,对于IE8-你不能通过阻止mousedown事件的默认动作来防止元素被聚焦.有关详细信息,请参阅jQuery ticket#10345(抱歉,不能发布超过2个链接).您可以尝试使用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;
    }
}

Answer 2

现在有1条线解决方案。

。

尽管状态fixed在Microsoft文档中，但问题仍未解决！

但是，现在我们也可以使用pointer-events: none;。它将禁用所有输入元素

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

Answer 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 才能让它在视图加载后应用更改。或者，更简单的是，将字段集放置在视图内。