光标/插入符号在IE中通过重叠出血 [英] Cursor/caret bleeding through overlay in IE

问题描述

我正在和现有网站www.shopthethirdfloor.com上工作。使用IE浏览器，如果您点击产品菜单，将焦点放在搜索框上，然后滚动弹出的菜单覆盖层下的搜索字段，搜索字段进入叠加层下，但光标继续闪烁，隐藏的输入字段是。这只发生在IE中。搜索和产品展示也是一个iframe。我认为这是一个错误/功能，取决于你是用户还是微软。

解决方案

我在Internet Explorer上工作团队，并且可以向你保证我们不会将此视为一项功能。这是一个错误，简单明了。我已将此问题和您的网站添加到该问题的内部故障单中，以供团队在下次分流期间进行审查。

暂时您可以添加检查 document.documentMode ，并应用一些功能来防止Internet Explorer在不相关元素顶部显示插入符号。在下面的代码中，我使用jQuery的 $。fn.one 方法在元素的 .onFocus 事件期间附加一次性使用的处理程序，然后在窗口的 .onScroll 事件：

$ b

  if（document.documentMode&& document。文档模式< 12）{
 $（document）.on（focus，：input，function（event）{
 $（window）.one（scroll，function（）{ 
 event.target.blur（）; 
}）; 
}）; 
} 
  

结果可以在这里看到： http://jsfiddle.net/yynsbrat/2/

我会继续与团队合作解决此问题，但在此之前，我希望这种方法能够在此期间为您提供帮助。

I am doing work on and existing website www.shopthethirdfloor.com. Using IE, if you click on the products menu, give focus to the search box and then scroll the search field under the menu overlay that pops up, the search field goes under the overlay, but the cursor continues to blink where the hidden input field is. This only happens in IE. The search and product display is an iframe also. I am thinking this is an ie bug/feature depending if you are a user or microsoft.

解决方案

I work on the Internet Explorer team, and can assure you that we don't view this as a feature. It's a bug, plain and simple. I've added this question, and your site, to an internal ticket on the issue for the team to review during the next triage.

For the time being you could add a check for the document.documentMode, and apply a bit of functionality to prevent Internet Explorer from showing the caret over the top of unrelated elements. In the following code I use jQuery's $.fn.one method to attach a one-time-use handler during an element's .onFocus event, and then dispose of it during the window's .onScroll event:

if ( document.documentMode && document.documentMode < 12 ) {
    $( document ).on( "focus", ":input", function ( event ) {
        $( window ).one( "scroll", function () {
            event.target.blur();
        });
    });
}

The results can be seen here: http://jsfiddle.net/yynsbrat/2/

I'll continue to work with the team on resolving this issue from our end, but until this I hope this approach is able to help you in the interim.

这篇关于光标/插入符号在IE中通过重叠出血的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！