在 Safari 中，选择在使用 blur() 隐藏下拉列表后停止工作

我有逻辑可以通过调用 blur（）来隐藏选择元素下拉列表。这适用于所有浏览器，但 Safari 除外。在Safari中，使用模糊隐藏后，下拉列表将不再显示 - 永远。以下是该错误的重现：

var count = 0;
function foo(e) {
	console.log("FOCUSSSEDnCount: " + count);
	if (count < 1) {
		var c = this
		setTimeout(function() {
			c.blur();
			console.log("BLURRRRR");
		}, 200)
	}
	count++;
}

<!DOCTYPE html>
<html>
<body>
<select onfocus="foo.call(this,event)">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>

有没有某种解决方案？或者苹果应该修复浏览器机制。

经过大量修补，我也可以看到但不能为您解决此问题。看起来 Safari 以不同的方式实现了下拉列表，因此 blur 事件实际上并没有隐藏下拉菜单，但它确实模糊了字段，这似乎导致尝试重新打开下拉列表时遇到困难。

当 js 以 select 元素为目标并且将事件侦听器添加到焦点事件时，我也可以确认此行为，例如

var myDropdown = document.getElementById('selectizer');
myDropdown.addEventListener('focus', function( event ) {
    console.log("FOCUSSSEDnCount: " + count);
    if (count < 1) {
        setTimeout(function() {
            event.target.blur();
            console.log("BLURRRRR");
        }, 200)
        count++;
    }
}, true);

我给你最好的建议是用HTML和CSS重新创建选择。你可以用普通的CSS来做到这一点，就像这样：

.menu .option {
    display: none;
}
.menu:focus .option {
    display:block;
}

只要确保你给你的div等一个tabindex来显示和隐藏内容。

如果你愿意，你也可以用JS来做，或者使用任何数量的现成组件，你可以通过快速的谷歌找到。

相关内容

最新更新

热门标签：