Consider the following example (also available here: /). It works fine in IE9, but doesn't work in Chrome 16.
In IE, if I click on the radio button, I see the message, but in Chrome nothing happens.
<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
<script type="text/javascript">
function begin() {
var rb1 = document.getElementById('rb1');
rb1.addEventListener('focus', function() { document.getElementById("theText").value = "focus"; }, false);
}
</script>
</head>
<body onload="begin()">
<input id="rb1" type="radio" />
<textarea id="theText"></textarea>
</body>
</html>
Any idea why it's not working in Chrome and what I can do to fix it?
p.s. I know I can probably use a library like JQuery, but I want to know if it's possible without using any libraries.
Consider the following example (also available here: http://jsfiddle/hq8Fg/1/). It works fine in IE9, but doesn't work in Chrome 16.
In IE, if I click on the radio button, I see the message, but in Chrome nothing happens.
<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
<script type="text/javascript">
function begin() {
var rb1 = document.getElementById('rb1');
rb1.addEventListener('focus', function() { document.getElementById("theText").value = "focus"; }, false);
}
</script>
</head>
<body onload="begin()">
<input id="rb1" type="radio" />
<textarea id="theText"></textarea>
</body>
</html>
Any idea why it's not working in Chrome and what I can do to fix it?
p.s. I know I can probably use a library like JQuery, but I want to know if it's possible without using any libraries.
Share Improve this question asked Jan 3, 2012 at 16:01 Stephen OberauerStephen Oberauer 5,4058 gold badges57 silver badges78 bronze badges3 Answers
Reset to default 4According to this less than stellar source, the focus event for a radio button is only supposed to fire when you tab into it, which you can see in your fiddle.
I'll see if I can find some better documentation of this—MDN ideally.
EDIT
From this MDN article
Changing the focus
There are several ways to change the currently focused element. The simplest is to call the focus method of a the XUL element that you wish to set the focus to. The blur method can be used to remove the focus from an element. The following example demonstrates this:
Example 5 : Source View
<button label="Focus" onmand="document.getElementById('addr').focus()"/>Or, you can use the methods advanceFocus and rewindFocus on the mand dispatcher. These methods move the focus to the next element in sequence or the previous element respectively. This is what happens when the user presses TAB or Shift+Tab.For textboxes, a special attribute, focused is added whenever the element has the focus. You can check for the presence of this attribute to determine if the element has the focus, either from a script or within a style sheet. It will have the value true if the textbox has the focus and, if the textbox does not have the focus, the attribute will not be present.
Suppose you wanted to move the focus from where it currently is, to the next place the browser thinks it should be. A user typically does this by hitting the "Tab" key. You can do this anywhere you have a XUL browser document by simply:
(emphasis mine)
You could try the onclick event since the problem isn't that the event is not called when the element gets focused; The problem is that it is really not focused on click. You can figure that out through focusing your textarea and then pressing SHIFT+Tab.
As best I can tell, the focus event only fires for a radio button when the keyboard is used to navigate to a radio button. For clicking on the radio button, use the click event like this: http://jsfiddle/jfriend00/XatCv/