Question

我有一个禁用按钮，当输入元素中有文本时，该按钮应该被启用。启用/禁用按钮的代码位于输入的onblur事件中。我的HTML包含input id="in"，button属性disabled="disabled"和span id="sp"。

$(document).ready(function(){
    var count = 0;
    $("#in").bind("blur",function(){
        alert("blur");
        if($("#in").attr("value").length > 0){
            $("button")[0].disabled = false;   
        } else {
            $("button")[0].disabled = true;
        }        
    });

    $("#in").bind("focusout",function(){
        alert("focusout");
        if($("#in").attr("value").length > 0){
            $("button")[0].disabled = false;   
        } else {
            $("button")[0].disabled = true;
        }        
    });

    $("button").click(function(){
        count++;
        $("#sp").text(count);
    });
});

在IE 9中，如果我在输入元素中键入文本并单击禁用按钮，则输入的onblur将启动，按钮将变为启用状态，然后我将获得按钮的单击事件。但是，在Chrome中，当我在输入元素中键入文本并单击禁用按钮时，根本不会发生任何事情。

我忽略了按钮的某些属性吗？我试图让focusout开火，但我得到的结果相同。我也使用Firefox获得相同的结果。 Chrome似乎比IE更严格地对待disabled属性，但这会导致我们的用户出现问题。当我将输入元素单击到禁用按钮上时，如何才能触发onblur（或某个等效的）事件？

Answer 1

在Chrome中，已禁用的按钮会从中删除所有事件侦听器。单击，右键单击，选择启动等对禁用的按钮不起作用。这意味着单击禁用按钮时焦点不会保留输入。您可以做的是通过class="disabled"手动禁用按钮，并添加一些样式以使其看起来禁用。下面是一个CSS示例，您可以使用它来禁用按钮：

button.disabled,
button.disabled:hover,
button.disabled:active,
button.disabled:focus {
    color:gray;
    background:#EEE;
    border:1px solid #AAA;
    border-radius:3px;
    outline:none;
}

我已经制作了一个显示 here 的JSFiddle。另请注意，我已经更改了现在切换已禁用类的代码，而不是已禁用的属性，并且我在按钮单击事件处理程序中放置了if语句，因此它不会触发按钮被禁用。

单击禁用按钮元素时，onblur事件不会在Chrome中触发 - 在IE中有效

1 个答案: