0

いくつかのHTMLコントロールを無効にしようとしていますが、IEブラウザとFirefox/Webkitブラウザの違いによるクロスブラウザの問題が発生しています。主な問題は、次の行で明らかです。

<input type="text" name="badIE" disabled="disabled" style="color:blue;" value="IE won't show this correctly" />

IEでは、上記の入力は灰色のテキストになりますが、テストした他のすべてのブラウザーではテキストは青色になります。IEでは、disabledテキスト入力のフィールドがテキストの色のCSSルールよりも優先されることが許可されているように見えます。このタイプの問題に対処するための確立されたベストプラクティスまたはIECSSハックはありますか？

4

2 に答える 2

1

ここで賛成された（しかし受け入れられなかった）答えによると、あなたは「読み取り専用」を使用することに固執しています。

不思議なことに、ユーザーが集中できるようにしたくないテキスト領域にテキストを表示しているのはなぜですか？通常のテキストHTML要素（例）で表示したほうがよいように思われます<p>。

于 2012-08-01T17:21:41.990 に答える
0

この問題を攻撃する方法はいくつかありますが、正確な答えは1つではありません。可能な限り最も完全な答えを提供するために、ここに可能な解決策のリストがあります。

  1. ブラウザ間の違いを受け入れ、無効なフィールドを引き続き使用します。これはおそらく正しい答えです。chipcullenが彼のコメントで示唆したように、すべてのブラウザが同じように見える必要はめったにありません。単にそれらの違いを受け入れて、それらを操作する方がよいでしょう。

  2. 無効にする代わりに、読み取り専用属性を使用してください。この方法の問題は、ユーザーが引き続き読み取り専用コントロールを操作できることです。たとえば、ユーザーはコントロールにフォーカスしたり、テキストの中央に点滅するカーソルを置いたりすることができます。相互作用が主な懸念事項である場合、その方法はハッキーな側面ですが、無効になっているコントロールを非表示の要素の背後でいつでもシールドできます。

  3. 私が選んだオプションは、入力要素を純粋なテキスト要素に置き換えることでした。この方法は、思ったほど簡単ではないかもしれませんが。私のページはインタラクティブで、クライアント側のアクションに応じて特定の要素が有効/無効になります。移行を処理するために、私は次のJavascriptを一緒に投げました（chipcullenの提案の後、jQueryの助けを借りて）：

    function disabledToSpan() {
$('input[type=text]:disabled, textarea:disabled').replaceWith(function () {
    return $('<span>' + $(this).val() + '</span>').attr('class',
        $(this).attr('class')).addClass('disabledTextInput');
    });
}

    要約すると、これにより、無効になっているすべてのテキスト入力とtextareaが検索され、値とクラスの両方を保持しながらスパンに切り替えてから、最後にdisabledTextInputクラスを追加して、無効になっている要素を特別にスタイル設定します。

于 2012-08-08T22:15:14.460 に答える