时间戳

首页 > 解决方案 > 在 Safari 中，选择在使用 blur() 隐藏下拉菜单后停止工作

javascript - 在 Safari 中，选择在使用 blur() 隐藏下拉菜单后停止工作

问题描述

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

var count = 0;

function foo(e) {
	console.log("FOCUSSSED\nCount: " + 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>

有什么解决办法吗？或者苹果应该修复浏览器机制。

标签： javascripthtmlsafari

解决方案

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

I can also confirm this behaviour when the select element is targetted by js and a event listener added to the focus event eg

var myDropdown = document.getElementById('selectizer');

myDropdown.addEventListener('focus', function( event ) {
    console.log("FOCUSSSED\nCount: " + 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 等 atabindex来显示和隐藏内容。

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

推荐阅读