processing onfocus in mozilla seems to keep my select from expanding

[Eric Trav]

Hello,

I am using mozilla and javascript to change the style background color
for my select with onfocus() and back to white with onblur().

When i process onfocus(); i have to click on the select three times to
get the popup menu and everything seems slow. No errors are reported
in the console however it seems as if the click event is not being
processed after the focus event is processed.

I have looked through the groups and it appears as if there is no way
for me to force the popup open (expand contents).

I was reading the gecko dom docs; but am not absorbing the solution.

Any thoughts as to the problem, erros, solutions?

Thanks,

Eric

 

[RobG]

Hello,

I am using mozilla and javascript to change the style background color
for my select with onfocus() and back to white with onblur().

When i process onfocus(); i have to click on the select three times to
get the popup menu and everything seems slow.

I couldn't replicate your situation exactly, play code below.

In Mozilla, when the select is clicked on, the options drop-down opens,
onfocus fires and the background changes. The next click (anywhere in
the page) will cause the drop-down to close but the select keeps focus,
so the background does not change.

If the next click (number 3) is not on the select, the select loses
focus, onfocus to fires and the background is changed again.

IE's behaviour is very different. A click on the select causes the
onfocus to fire, the options drop-down opens, the background changes,
then the drop-down closes and the onblur fires. All from just one
click.

The only way to select an option is the old Mac-centric way of
mouse-down and drag to a selection. As soon as the mouse button is
released, the drop-down closes and onblur fires. About 90% of users
will likely never work out how to select an option.

No errors are reported
in the console however it seems as if the click event is not being
processed after the focus event is processed.

Which click event?

I have looked through the groups and it appears as if there is no way
for me to force the popup open (expand contents).

You can't (AFAIK) use JavaScript to get the options drop-down to open.

I was reading the gecko dom docs; but am not absorbing the solution.

Any thoughts as to the problem, erros, solutions?

Given the different behaviour of IE and Gecko browsers, I'd give it a
miss. There seems little point in doing it, except maybe for users
using keyboard navigation to provide extra highlight when the select
element has focus. Even then, IE's effort is just to put a border
around the element in the chosen background colour.

<!-- play code -->

<form action="" name="formA">
<select name="selA"
onfocus="this.style.backgroundColor='red';"
onblur="this.style.backgroundColor='white';"<option>opt 0</option>
<option>opt 1</option>
<option>opt 2</option>
</select>
<input type="reset">
</form>