Question

I want to send an error message to the server when a jquery event is not supported by the browser.
For example blur() event will not get triggered for radio button in chrome browser.
How can i identify this and send error message to the server?

UPDATE

I tried Modernizr.hasEvent on radio button for blur event.Eventhough it returns true blur event is not getting called in google chrome.Try the below jsfiddle in google chrome.

html

<input type = 'radio' id = 'r1' name = 'r1' value = 'R1'>R1</input>
<input type = 'radio' id = 'r2' name = 'r1' Value = 'R2'>R2</input>
<input type = 'text' id = 'r3'  Value = ''></input>

js

alert(Modernizr.hasEvent('blur',$('#r1')));
alert(Modernizr.hasEvent('blur',$('#r3')));
$('#r1').blur(function(){
  alert('blur is called')
});
$('#r3').blur(function(){
  alert('blur is called')
});

http://jsfiddle.net/nUN8k/23/

Answer 1

The problem with chrome is not it doesn’t support blur on radio buttons. The problem is that the radio button never gets focused in the first place.

Try this in your fiddle:

Test 1:

• Click R1
• Click R2
• Click away

The event doesn’t fire, but no focus (an orange border) is indicated either.

Test 2:

• Click R3
• Press Shift+tab (and dismiss the blur alert). R2 should be focused but not selected.
• Press the left key. R1 gets selected and focused.
• Click away. R1 registers a blur event.

So, the event is supported in Chrome – only it doesn’t fire when you expect.

The workaround is to focus the radio button manually when it is clicked so that you get cross-browser consistent (not just valid) behavior:

$("input").click(function(){
    $(this).focus()
})

http://jsfiddle.net/nUN8k/24/

The test – I haven’t checked if it works and I don’t know if it’s implemented in modernizr – would be to click a hidden input and see if it get focused. However, there could be some false positives (mistaken for Don’t focus hidden elements etc.) …