Question

After this post i found a strange bug in jQuery or in Firefox. Can you explain which of it is right.

jQuery(document).ready(function(){

    //Works on Windows in: Firefox(17.0.1), IE
    //Doesn't work on OS X 10.8 in: Firefox(17.0.1), Safari
    //And also doesn't work on Windows in Chrome
    jQuery('input').focus(function(){
        jQuery(this).val('');
    });

    //Same on events: change, click, select, on
    jQuery('.checkbox').click(function(){ 
        alert(jQuery(this).val());
    });
});​

Here is example http://jsfiddle.net/nonamez/Gq8VK/

Answer 1

Not all browsers have the same behavior when it comes to form elements. What you are seeing is that webkit browsers aren’t causing the checkbox to be focused as a result of the click event. Whether or not this is a bug would be decided by the w3 spec.

I can’t find a definitive answer at w3.org on the subject. Most of what I’ve found seems to suggest that this is left up to the user agent.

You can, however, make all browsers behave the same by including this in your scripts: http://jsfiddle.net/Gq8VK/5/

// Any input that does not receive focus from a mouseclick 
// will now do so, in all browsers. This shouldn't affect browsers that
// focus input elements on click. 
$(document).on('mouseup', 'input', function(){
    if (!$(this).is(":focus")) $(this).focus();
});

The script is using event delegation, so it will work for all inputs including ones that don’t exist in the DOM when the event is attached.