IE issue: cursor showing on overlay div while input in background

Question

We have div overlay and input on page, while on certain action we show model window(which is custom menu here).

Issue: In internet explorer the when model window is in foreground we focus on the text input and issue is its cursor blink over the model window. please see the attached fiddle on internet explorer. I have tested it on IE10 and 11.

HTML:
<button onclick="showDiv()">Show Div</button>
<div>
</div>
<input type="text" />

script:
function showDiv (){
    $('div').show()
    setInterval(function(){
        $('input').focus();
    },200);
}

http://jsfiddle.net/arunthakur14/qobvawr9/

Answer 1

This problem seems to have been documented elsewhere, and would appear to be an IE bug: Cursor/caret bleeding through overlay in IE

But, here's a modified solution that will hopefully fit your needs - add this jQuery code to your page and it will take the focus away from the input if the overlay div is visible:

(function () {
    if ( document.documentMode && document.documentMode < 12 ) {
        $( document ).on( "focus", ":input", function ( event ) {
            if ($('div').is(':visible')) {
                event.target.blur();
            };
        });
    }
}());

Here's the modified JSFiddle for the answer: http://jsfiddle.net/qobvawr9/1/