Roy Tang

Programmer, engineer, scientist, critic, gamer, dreamer, and kid-at-heart.

Blog Notes Photos Links 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?

Posted by under notes at #javascript #internet-explorer #questions #stackoverflow #software development
Also on: stackexchange / 6

Comments

Canavar
Canavar
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.
annakata
annakata
WFM - have you tried this on other instances of IE?
Alsciende
Alsciende

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

Sorin Comanescu
Sorin Comanescu
Do you want to “click” it or just focus?
arhak
arhak

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>
arhak
arhak
notice your input tags are not proper markup
On This Site
Things I Write About
Elsewhere
Subscribe