Tabbing focus into <INPUT> textbox

[jpbrassard]

Hiya,

I've been developing a custom drop-down box to get around the limitations of the <SELECT> tag, using tables and divs and input=text tags. I've got it working up to a point, in that it responds perfectly to mouse events, but to keyboard events it's ... not.

Specifically, what I'm trying to do is this: I have an <INPUT type=text> tag that acts as the primary display for the drop-down box (the actual &quot;drop-down&quot; part uses <DIV> tags and a bunch of CSS and javascript). The <INPUT> tag has been marked &quot;readonly&quot; so that it's not editable. I use the <INPUT> tag's onFocus and onBlur events to fire a couple of javascript functions that change the backgroundColor and color properties accordingly (darkblue/white for onFocus, white/black for onBlur). When the <INPUT> tag gains the focus by a mouse event, it works perfectly. However, when it gains the focus by a keyboard event - that is, when I tab to it - the backgroundColor changes but the text becomes highlighted in white (only during onFocus). And I cannot, for the life of me, figure out why the heck it's doing it, nor have I been able to come up with a fix.

Anyone have any ideas? I'm pretty sure it's got to be something with how the <INPUT type=text> tag works, but I haven't read anything anywhere about this being expected behavior.

Any and all help/ideas/suggestions would be greatly appreciated.

Thanks,
jp
jpbrassard@hotmail.com

 

[SashiRaveendran]

may be its because the input field is readonly. Did you try it without readonly set?

instead of setting readonly may be you could trap keypresses and cancel them

 

[jpbrassard]

I hadn't tried it without readonly set, but I just tried it and it made no difference - the text in the <INPUT> tag's value always gets highlighted differently when it gets the focus from tabbing into it. I even tried putting some code in my onFocus handler to see if I could capture the tab, but no dice on that front either.

Thanks for the suggestion, though. I'm going to keep plugging away at it. If I come up with a solution, I'll post it here.

In the meantime, if anyone else has any suggestions, I'm all ears.

Thanks,
jp
jpbrassard@hotmail.com

 

[jpbrassard]

I found a way to do it, by invoking the

selection.empty()

method of the document object when the control receives the focus, using javascript. Works like I want it to, now.

 

[jpbrassard]

I forgot to mention that I found this solution from an answer to a similar question I posted on the newsgroup microsoft.public.scripting.jscript, answered by Ian Ward through developersdex.com.

Credit where credit is due...