web-dev-qa-db-ja.com

フィールドセットとすべての子入力の無効化-IE

その下に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を除く。
グーグルで調べたところ、フィールドセット+無効がサポートされていないことがわかりました。簡単な回避策を探しています。

私は近いが完璧ではないいくつかのことを試しました、そして私は解決策を必要とする最初のものではないと思います（私はグーグルで何も見つけられませんでしたが）。

angularjsinternet-explorerangularjs-directivefieldsetdisabled-input
15
Amir Popovich

現在、1行のソリューションがあります。

。

Microsoftドキュメント のステータスはfixedですが、問題はまだ解決されていません。

しかし、今ではpointer-events: none;も使用できます。すべての入力要素を無効にします

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

IEの問題に関連しているようです。 this を参照してください。関連しています（申し訳ありませんが、まだ2つ以上のリンクを投稿することはできません）。最初のリンクは次のメジャーで修正されます。 IEリリース（エッジ？）。2番目のものはまだ開いています。

私が思うに、問題は、ユーザーが無効なフィールドセット内の入力をクリックして編集できることです。

その場合、IE 8+の「cs​​sのみ」の回避策があり、無効なフィールドセットの上に透明なオーバーレイを作成して、フィールドセットがクリックされないようにします。

回避策は、MicrosoftConnectの問題で説明されています。

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 +の場合、フィールドセットでマウスダウンイベントをキャッチし、フィールドセットが無効になっている場合は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以下の場合、無効なフィールドセットでバブリングするマウスダウンイベントをキャッチすることは不可能であり、イベントハンドラーは呼び出されません。しかし、たとえば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;
    }
}
10
ylepikhov

私はまったく同じ問題を抱えていました、そして私はこの指令を思いつきました：

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をいじる必要があるかもしれません。または、さらに簡単に、フィールドセットをビュー内に配置します。

2
Iain

他のブラウザが無効フィールドのホバーに（disabled（/））記号を表示するので、この変更はIE @mediaを使用してのみ適用する必要があります

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

これは、IE11でフィールドセットを無効にするための修正です： https://connect.Microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled

IEの検出： CSS機能/機能検出を使用したIE11の検出

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