代码之家 › 专栏 › 技术社区 › h3dkandi

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

safari html javascript

h3dkandi · 技术社区 · 6 年前

我有一个逻辑,它通过调用blur()来隐藏select元素下拉列表。除了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>

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

1 回复 | 直到 6 年前

Rillus 6 年前

经过大量的修修补补,我也能看到,但不能为你解决这个问题。看起来Safari实现了不同的下拉列表,所以 blur event实际上并不隐藏下拉菜单,但它确实模糊了字段,这似乎会导致在尝试重新打开下拉菜单时遇到困难。

当select元素被js和添加到focus事件的事件侦听器作为目标时,我还可以确认这种行为。

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重新创建select。你可以用普通的CSS这样做:

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

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

如果你喜欢,你也可以用JS来做,或者使用任意数量的现成的组件,你可以用快速谷歌找到。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前