How to hide text cursor below div element

Question

I am new to CSS and javascript.
I have one search text box in which I can add any search value. After entering a wrong value one pop up div comes and says "no records found" (with close button to close div). after I put my cursor on text box without closing pop up. my cursor displays above the div box.
|------------------|search box
|------------------|

My text box css properties.

z-index: 200630; position: absolute; width: 149px; height: 21px;
overflow: visible; top: 0px; cursor: default; left: 0px;

My div element css prop:

z-index: 201350; position: absolute; width: 270px; height: 20px;
overflow: hidden; top: 0px; cursor: default; left: 0px;

How to hide cursor below div element.Issue occurs only in IE

I have created small jsfiddle.Issue occur in IE 8 only not FF http://jsfiddle.net/raj31/LUaej/1/

Answer 1

I know I'm late for this but I've just solved this bug using document.activeElement.blur();.

Answer 2

It is possible to dismiss cursor while focusing your new div. It worked for me, I am closing a div which includes username and password inputs after authentication. After enter key, cursor was blinking but, I focused logo in callback function in auth function. Now it is OK

Answer 3

Not possible with available IE(s)..

See reference

https://connect.microsoft.com/IE/feedback/details/841043/blinking-text-cursor-overlapping-with-div

Answer 4

I've created a small fiddle, which I believe reproduces your problem.

I think the solution could be to simply blur search field on showing the dialog, like I did in the 3rd line (comment it out to get your problem):

 $('.seach').blur()