javascript - 使用 jquery 删除禁用属性后，输入字段为只读

Question

这里有一个奇怪的家伙。

我有一个包含多个字段和一个提交按钮的表单。除电子邮件字段外，所有字段一开始都设置为禁用。

我有一个方法可以运行并检查电子邮件字段是否有更改。如果它发生变化，则所有其他字段都会启用。这在 Firefox、Chrome 和 Internet Explorer 7/8/9 中完美运行，但在 10 中则无法正常运行，如图所示。

在 IE10 中，所有应禁用的字段均已禁用，但未灰显的电子邮件字段的行为就像只读字段一样，不允许输入或聚焦。

我最初使用 .prop() 方法来更改禁用状态，但某些较旧的 IE 版本存在问题，因此我改用 attr() 和 removeAttribute() 方法。任何想法都值得赞赏。

下面添加了解决方案 - 谢谢大家!!

<form id="query_form" class="form-inline" enctype="multipart/form-data" action="" method="post">

<input type="text" class="input-large" placeholder="email" id="email" name="email" value="" />

<input type="text" class="input-small" placeholder="start date" id="sd" name="sd" value="" disabled="disabled"/>

<input type="text" id="ed" class="input-small" placeholder="end date" name="ed" value="" disabled="disabled"/>

<button type="submit" class="btn" id="run_query" name="run_query" disabled="disabled">Run Query</button>

</form>

function check_required_fields(){
        var email = $.trim($("#email").val());
        if(email.length > 0){
            $("#query_form").find(":input").not("#email").each(function() {
             $(this).removeAttr('disabled');    
        });
        }else{
            $("#query_form").find(":input").not("#email").each(function() {
             $(this).attr('disabled', true);
              });
        }
}
$(document).ready(function(){
var timer;
$("#email").on("change keyup paste", function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        check_required_fields()
    }, 0);
}).triggerHandler('change');
    });

最后还有一点信息我正在使用 Jquery 1.8.3 并正在使用 bootstrap。 Firebug 中的控制台没有显示任何类型的错误，IE10 中的开发人员工具也没有显示任何类型的错误。

拼图的最后一 block 。

在另一个脚本中，我使用相同的代码进行一次编辑，它在两个字段上运行。因此它看起来如下:

<form id="query_form" enctype="multipart/form-data" action="" method="post">

<input type="text" class="input-large" placeholder="email" id="email" name="email" value="" />

<select id="qt" name="qt">
<option selected="selected" value="">select query type...</option>
<option value="taxon_group">species group</option>
<option value="site_name">site name</option>
<option value="taxon_name">species name</option>    
</select>

<input type="text" id="ed" class="input-large" placeholder="end date" name="ed" value="" disabled="disabled"/>

<button type="submit" class="btn" id="run_query" name="run_query" disabled="disabled">Run Query</button>

</form>
function check_required_fields(){
        var email = $.trim($("#email").val());
        var query_type = $("#qt").val();
        if(email.length > 0 && query_type.length > 0){
            $("#query_form").find(":input").not("#email, #qt").each(function() {
             $(this).removeAttr('disabled');    
        });
        }else{
            $("#query_form").find(":input").not("#email, #qt").each(function() {
             $(this).attr('disabled', 'disabled');
              });
        }
}
    $(document).ready(function(){
    var timer;
    $("#email, #qt").on("change keyup paste", function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            check_required_fields()
        }, 0);
    }).triggerHandler('change');
    });

一切运行良好，只是在 IE10 中每次按键后电子邮件字段都会失去焦点。有什么想法吗？在仅将相同功能应用于电子邮件字段的其他脚本中，不会发生这种情况。

Answer 1

删除oninput事件，看起来像干扰IE10中的属性占位符。顺便说一句，因为您已经绑定(bind)了 onkeyup 和 onchange 绑定(bind)了 onpaste，这最终应该给出与 keyup/change 一起使用的 oninput 相同的行为。

您必须延迟一些事件才能使 onpaste 工作，顺便说一句，以避免无用的多次调用。

DEMO

$(document).ready(function () {
    var timer;
    $("#email").on("change keyup paste", function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            check_required_fields()
        }, 0);
    }).triggerHandler('change');
});