google chrome does not fire blur event on radio bu

Question

This is my first post here - hello everybody

I am currently developing a html form with the support of css and jquery. The form will be used by 'unexperienced users' so my focus lies on good usability. Therefor I am providing a hint to every input field with further instructions. To show the hints I am using the onfocus/onblur javascript event, so only one hint at a time is shown. This worked well when I only had input fields of type="text", but with input fields of type="radio" I am experiencing troubles in google chrome.

I made a quick example on jsfiddle.net so you can see what I mean. The code there is very similar to the code I use in my form, so I didn't bother to post it here. The alert pops up in every browser I tested so far except google chrome. I wonder why? Is there any known solution or workaround to it?

Answer 1

From quirksmode:

Safari and Chrome do not fire focus/blur events when the user uses the mouse to access checkboxes, radios or buttons. Text fields, textareas and select boxes work correctly.

There are a few suggestions to work around this here.

Answer 2

Working sample:

$('input').on({
    click: function (e) {
        this.focus();
        $('#' + this.id + 'msg').show();
    },
    blur: function (e) {
        $('#' + this.id + 'msg').hide();
    }
});

Answer 3

blur will work on certain versions of Chrome (but not mine 10.0.648.205), but only if you move away from the entire collection of elements. Not sure if this is helpful, but this will work:

$('input:radio').click(function() {
    alert('why does this not show up in google chrome?!');
});

HTH.