3

我在 IE 中的表单有问题。我在表单中禁用了字段，即 具有属性的字段disabled="disabled"。这些字段以灰色显示输入文本，看起来非常暗淡/模糊，如果我尝试对这些字段应用 css 更改，它将不适用于 IE，但适用于其他浏览器，如 chrome、firefox。

有什么方法可以使文本在这里更好地字体颜色？

我认为这样做的一种方法是删除属性并使用 javascriptdisabled="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

2

.prop()您可以使用jQuery 中提供的方法将禁用的输入字段更改为只读字段。我通常不鼓励使用.attr()，这就是为什么。

$(function (){
    $('input').prop({
        'disabled': false,
        'readonly': true
    });
});

尽管该方法.removeProp()可用，但文档鼓励在使用它时不要使用它，因为引用它“将完全删除该属性，并且一旦删除，就无法再次将其添加到元素中。用于.prop()将这些属性设置为 false。”

在此处查看演示：http: //jsfiddle.net/teddyrised/tE98z/

于 2013-12-25T04:37:56.647 回答
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 
document.getElementById("your_field").readOnly=true;

或者，使用 jQuery：

$('#your_field').attr('readonly', true);
于 2012-10-07T06:43:07.077 回答
0

使用 setAttribute 属性。请注意，在示例中，如果选择 1 在文本框上应用只读属性，否则删除属性只读。

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 回答
0

如果您以编程方式禁用输入，则可以根据需要设置样式

试试看：

    //bloqueo todos los radiobuttons y checkboxs
  //block all radiobuttons and checkbox
    jQuery(document).on("change", 'input:checkbox.yourClass,input:radio.yourClass', function () {
    jQuery(this).prop("checked", false);
  });
  //bloqueo campos de texto
  //block all text fields
  jQuery(document).on("focusin", 'input.yourClass, textarea.yourClass', function () {
    jQuery(this).blur();
  });
  //bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) {
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
  });

如果您想设置样式，它们在技术上不会被禁用

这里可以看到原代码：https ://jsfiddle.net/9kjqjLyq/

于 2017-10-18T15:16:57.460 回答
-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 回答