onblur event doesn't fire in Chrome when clicking on disabled button element - works in IE

Viewed 3727

I have a disabled button that should become enabled when there is text in an input element. The code to enable/disable the button is in the onblur event of the input. My HTML consists of an input with id="in", a button with attribute disabled="disabled" and a span with 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);
    });
});

In IE 9, if I type text into the input element and click on the disabled button, the input's onblur fires, the button becomes enabled, and I get the button's click event. However, in Chrome, when I type text into the input element and click on the disabled button, nothing at all happens.

Is there some property of the button I'm overlooking? I tried to get the focusout to fire, but I get the same result. I also get the same result using Firefox. Chrome seems to treat the disabled attribute more strictly than IE, but this is going to cause problems with our users. How can I get the onblur (or some equivalent) event to fire when I click off the input element onto a disabled button?

1 Answers
Related