10

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?

kapa
  • 77,694
  • 21
  • 158
  • 175
mwallisch
  • 1,751
  • 2
  • 21
  • 29
  • The alert does work for me in Chrome 10.0.0.648.205 Win64. I select the radio button and then tab away from it, causing it to lose focus. Also if I close the window while it is focused, the onblur event fires and I see the alert. – Michael Berkowski Apr 21 '11 at 13:36
  • Not working for me; Chrome 10.0.648.205 Win7 – dooburt Apr 21 '11 at 13:40
  • Tabbing away worked for me on Chrome 11/OS X. Perhaps you need a different event to capture the behavior you're looking for? – Jimmy Sawczuk Apr 21 '11 at 13:42
  • Off topic, but welcome to stackoverflow :) – dooburt Apr 21 '11 at 13:43
  • Yea you are right, it works when using tab - I didnt test that :/ . So it seems the button doesnt get the correct focus when clicked (in chrome)?! – mwallisch Apr 21 '11 at 13:47

3 Answers3

5

Working sample:

$('input').on({
    click: function (e) {
        this.focus();
        $('#' + this.id + 'msg').show();
    },
    blur: function (e) {
        $('#' + this.id + 'msg').hide();
    }
});
canon
  • 40,609
  • 10
  • 73
  • 97
  • yep, it seems manually setting focus on the radio button (when clicked) does the trick. My working version: http://jsfiddle.net/54y69/11/ – mwallisch Apr 21 '11 at 14:01
4

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.

Community
  • 1
  • 1
Diadistis
  • 12,086
  • 1
  • 33
  • 55
  • As I say in the question you referenced: I encountered the same problem, text inputs and radio inputs had the event "focus" but the radio did not fired this event in Webkit, so these were put on the "change" event. Now I have two events, "focus" for text inputs and "change" for the radio, both call the same callback. – Alejandro García Iglesias Nov 22 '11 at 16:44
2

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.

dooburt
  • 3,010
  • 10
  • 41
  • 59
  • Sorry but the `onBlur` is a Javascript event for `radio` button elements. Set this page ------- http://www.javascriptkit.com/jsref/radio.shtml – Jack Billy Apr 21 '11 at 13:40
  • 2
    `onBlur` from what? If the radio button is part of a collection, is it the collection that is blurred or the control itself? There is ambiguity and maybe why it doesn't work in Chrome? `blur` collection = works, `blur` element doesn't. – dooburt Apr 21 '11 at 13:43