在IE中的下拉菜单后面时，输入字段中的文本光标仍然可见 [英] Text cursor from input field remains visible when behind dropdown menu in IE

问题描述

在Internet Explorer 11中，当下拉菜单在输入字段上打开时，包含一些键入文本的输入字段内闪烁的文本光标仍然可见.我希望光标在菜单后(例如在Chrome/Firefox/Safari中)会被遮盖.

In Internet Explorer 11, the blinking text cursor inside an input field containing some typed-in text remains visible when a dropdown menu toggles open over the input field. I expect the cursor to be obscured when it's behind the menu like in Chrome/Firefox/Safari.

当我在输入字段中输入随机文本然后将鼠标悬停在下拉按钮上以提示下拉菜单在输入字段上切换打开时，我发现了此问题.我尝试过调整输入字段的z-index，但无法使该光标消失.

I found this issue when I entered random text in the input field and then (without clicking out of the input field) hovered over the dropdown button to prompt the dropdown menu to toggle open over the input field. I've tried adjusting the input field's z-index, but have not been able to get that cursor to go away.

如何使该光标对IE11保持隐藏状态?

How can I get that cursor to stay hidden for IE11?

截屏:

摘要:

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<br>
<hr>
<br>
<form action="/action_page.php">
  First name: <input type="text" name="FirstName"><br>
  <input type="submit" value="Submit">
</form>

推荐答案

显然，光标是在IE中的窗口表面上绘制的.您所能做的就是在 .dropbtn 上的 mouseenter 上的activeElement上触发 blur():

Apparently, the cursor is painted over the window surface in IE. All you can do is trigger blur() on the activeElement on mouseenter on .dropbtn:

document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
  document.activeElement.blur();
})

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<br>
<hr>
<br>
<form action="/action_page.php">
  First name: <input type="text" name="FirstName"><br>
  <input type="submit" value="Submit">
</form>

这篇关于在IE中的下拉菜单后面时，输入字段中的文本光标仍然可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！