roytang.net Posts Photos Archives About

Given the code below:

function test() {
    document.forms[0].TEST[0].focus();
}
<form>
    <input type="button" value="Test" onclick="test()" />
    <input type="radio" name="TEST" value="A">A
    <input type="radio" name="TEST" value="B">B
</form>

In IE6, clicking the button doesn't focus the control, unless I've already tabbed through the radio at least once, in which case it works. =/

Any idea how I should be focusing the control? The above works perfectly fine in FF of course.

Edit: I found that the control is being focused, except the highlight box around the radio button is not being rendered. (I can hit space to activate the radio button, and also use arrow keys to change the active button). So the question becomes: how can I force the focus highlighting box to render?

Comments

Canavar said...

Actually it's focussing, you can test it by focusing the second item and after clicking the button click space, you can see the second item selected. This shows the items are getting focus but I think you mean the dashed selection after focus. I don't know how to do that.

via stackoverflow.com
annakata said...

WFM - have you tried this on other instances of IE?

via stackoverflow.com
Alsciende said...

There's an option in the Accessibility Advanced Options of Internet Explorer that says something like "Move the system cursor with selection or focus". It might be a solution if you have a way to propagate IE settings.

edit: it doesn't work

via stackoverflow.com
Sorin Comanescu said...

Do you want to "click" it or just focus?

via stackoverflow.com
arhak said...

You can force any style for the focus' outline

function test() {
    document.forms[0].TEST[0].focus();
}
/* if this CSS rule is overrode by another one, then strengthen the selector of this rule to make it more specific (or use "!important") */
input[name=TEST]:focus {
    outline: 1px dotted blue;
}
<form>
    <input type="button" value="Test" onclick="test()" />
    <input type="radio" name="TEST" value="A" />
    <input type="radio" name="TEST" value="B" />
</form>
via stackoverflow.com
arhak said...

notice your input tags are not proper markup

via stackoverflow.com