Hiding the text input cursor (the caret) showing through overlayed elements Internet Explorer

Question

I have a form with a special widget that fills in a text input. When the text input has focus, the widget appears above the text input (intentionally above it) and the user clicks options in it, when they're done it disappears and fills in the input. There is a problem with this in IE, when the widget appears above the input, the field's caret (blinking text input cursor for the field) shows through the widget. The widget is a normal html/css dom structure. It still does this when I set the z-index for the widget to be above the text input. How can I get rid of the caret or make sure it doesn't shine through? I don't want to set the focus elsewhere for the duration that the widget is shown because the widget requires that the input has focus.

Answer 1

Try setting the unselectable attribute to on while the widget is being shown, then to off at the end. It's an IE specific attribute, and if it works you should check it in IE 8, as I'm not sure if it's still supported.

Answer 2

Seems to me that a simple blur on that field or focus on a field in the widget would fix your problem.

Answer 3

Do you have a URL example we can take a look at?

Based on what you describe, can you not set the CSS style for the container element to "display: none;"?

Answer 4

Similar to Ryan's answer, what if you set (and subsequently remove) the attribute disabled="disabled" ?