字段集和禁用所有子输入 - 解决 IE

Posted 2023-02-22

【中文标题】字段集和禁用所有子输入 - 解决 IE

【英文标题】：Fieldset and disabling all child inputs - Work around for IE

【发布时间】：2014-07-29 22:29:46

【问题描述】：

我有一个字段集，它下面有一个 ui 视图。 每个视图下都有很多字段（字段是包装输入的指令）。

看起来像这样：

<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。 我做了一些谷歌，发现 ie 不支持 fieldset + disabled，我正在寻找一种快速的解决方法。

我尝试了一些接近但不完美的方法，我认为我不是第一个需要解决方案的人（即使我在谷歌上没有找到任何东西）。

【参考方案1】：

由于其他浏览器在悬停时为禁用字段显示 (disabled(/)) 符号，因此我们应该仅使用 @media 对 IE 应用此更改

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
             fieldset[disabled] 
                 pointer-events: none;
                 
            

【参考方案2】：

这是在 IE11 中禁用字段集的修复： https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled

检测 IE： Detecting IE11 using CSS Capability/Feature Detection

_:-ms-lang(x), fieldset[disabled].ie10up 
        
            pointer-events: none;
            opacity: .65;
        

【讨论】：

【参考方案3】：

它现在有 1 行解决方案。

.

虽然Microsoft documentation 中的状态是fixed，但问题仍未解决！

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

fieldset[disabled] 
    pointer-events: none;

【讨论】：

这个。节省了我一些时间，而不必编写 JS 解决方法之类的。

链接页面不存在了。

【参考方案4】：

似乎与 IE 问题有关，请参阅 this 和相关（抱歉，不能发布超过 2 个链接）。 第一个将在下一个主要的 IE 版本（Edge？）中修复。 第二个仍然打开。

我怀疑，问题是用户仍然可以点击禁用字段集中的输入并对其进行编辑。

如果是这样，IE 8+ 有“仅 css”解决方法，它会在禁用的字段集上方创建透明覆盖，以防止点击字段集。

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+，您可以在 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 及以下版本，无法在禁用的字段集上捕获冒泡的 mousedown 事件，甚至不会调用事件处理程序。但是有可能在字段集的祖先上捕获它们，例如在 documetn.body 上。但同样，对于 IE8，您不能通过阻止 mousedown 事件的默认操作来阻止元素被聚焦。有关详细信息，请参阅 jQuery 票证 #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;
    

【讨论】：

CSS 效果很好。我还将在禁用的字段集上添加一个不允许的光标。 fieldset[disabled] 游标：不允许；

非常感谢！你拯救了我的一天。

z-index: 1 与 bootstrap CSS 一起使用时太少了。例如.input-group.form-control 和许多其他样式位于 z-index 2、3 等。它适用于 z-index 或 10

【参考方案5】：

我遇到了完全相同的问题，我想出了这个指令：

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 元素（实际上是所有元素）似乎有一个“禁用”属性，该属性设置为 false。

编辑：我刚刚意识到它在“ng-view”中。您可能不得不弄乱 $timeouts 才能让它在视图加载后应用更改。或者，更简单的是，将字段集放在视图中。