3

IEのフォームに問題があります。フォームのフィールドを無効にしました。プロパティを持つフィールドdisabled="disabled"。これらのフィールドは入力テキストを灰色で表示し、非常に鈍い/ぼやけて見えます。このようなフィールドにcssの変更を適用しようとすると、IEでは機能しませんが、chrome、firefoxなどの他のブラウザーでは機能します。

ここでテキストをより良いフォントの色にする方法はありますか？

これを行う1つの方法は、プロパティを削除し、javascriptを使用してプロパティdisabled="disabled"を追加することだと思いました。readonly="readonly"これが可能な場合、Javascriptでこれを行うにはどうすればよいですか？私はJavascriptを初めて使用するので、助けてください

動作を説明するHTMLの下。IEと他のブラウザの両方でこれを実行して、違いを確認してください。

<html>
    <head>
        <style type="text/css">

            .col {
                background-color: yellow; 
                color: red;
            }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Editable field: </td>
                <td>
                    <input type="text" id="editable-field-id" value="Editable field" class="col"/>
                </td>
            </tr>
            <tr>
                <td>Disabled field: </td>
                <td>
                    <input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
                </td>
            </tr>
            <tr>
                <td>Readonly field: </td>
                <td>
                    <input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
                </td>
            </tr>
        </table>
    </body>
</html>

私はこれをIE9でテストしています。

4

6 に答える 6

0 
document.getElementById("your_field").readOnly=true;

または、jQuery を使用する場合:

$('#your_field').attr('readonly', true);
于 2012-10-07T06:43:07.077 に答える
0 
<html>
    <head>
        <style type="text/css">

            .col {
                background-color: yellow; 
                color: red;
            }

        </style>

    </head>
    <body>
        <table>
            <tr>
                <td>Editable field: </td>
                <td>
                    <input type="text" id="editable-field-id" value="Editable field" class="col"/>
                </td>
            </tr>
            <tr>
                <td>Disabled field: </td>
                <td>
                    <input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
                </td>
            </tr>
            <tr>
                <td>Readonly field: </td>
                <td>
                    <input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
                </td>
            </tr>
        </table>
        <script type = "text/javascript">
            document.getElementById("disabled-field-id").disabled = false;
            document.getElementById("disabled-field-id").readOnly = true;
        </script>

    </body>
</html>
于 2012-10-07T06:45:23.127 に答える
0

setAttribute プロパティを使用します。例では、select 1 がテキストボックスに readonly 属性を適用する場合、それ以外の場合は属性 readonly を削除することに注意してください。

http://jsfiddle.net/baqxz7ym/2/

document.getElementById("box1").onchange = function(){
  if(document.getElementById("box1").value == 1) {
    document.getElementById("codigo").setAttribute("readonly", true);
  } else {
    document.getElementById("codigo").removeAttribute("readonly");
  }
};

<input type="text" name="codigo" id="codigo"/>

<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
于 2015-05-08T16:58:22.563 に答える
-2

純粋な javascript (できれば jQuery) ソリューションに依存する必要があります。

すべてのコントロールにカスタム属性を追加します。

<input type="text" disabled="true" />

これで、それらが無効になっているかどうかを確認でき、javascript を使用してそれらをブロックすることができます:

var value = yourTextBox.value;    //the last value that the control holds,
                                  //before it was disabled?

$('yourTextBox').click(function() {
    value = $(this).value;
});

$('yourTextBox').blur(function() {
    if($(this).attr('disabled') == 'true')
        $(this).value = value;
});

さらに厳密にするには、別の関数を追加します。

$('yourTextBox').keypress(function() {
    if($(this).attr('disabled') == 'true')
        $(this).value = value;
});

シンプルなものが欲しいなら、これをお勧めします：

$('yourTextBox').keypress(function() {
    if($(this).attr('disabled') == 'true')
        return false;
});
于 2012-10-07T07:09:19.413 に答える