javascript - 在不阻止组合框打开的情况下停止窃取焦点

Question

我有一个文本框。当用户聚焦文本框时，我会调出一个助手来帮助他们填写它。当文本框变得模糊时，助手就会消失。

问题是助手现在需要包含一个组合框(它是一个普通的 select 标签)。以前，为了让用户在不失去焦点的情况下与助手进行交互，我们在 mousedown 事件上使用了 preventDefault() 。但是，组合框的打开处理程序似乎是 mousedown 上的默认事件。因此，如果我们阻止默认，组合框将忽略用户的点击。如果我们不 preventDefault，组合框打开一纳秒，然后字段失去焦点，此时助手消失，包括您刚刚打开的组合框。

如何阻止该字段失去焦点，但仍允许用户与组合框进行交互？

编辑:我真的宁愿避免输入失去焦点。当输入没有被聚焦时，助手的其他功能就没有真正的意义。我考虑过在您单击组合框后简单地显示帮助器，即使输入没有聚焦，但决定我不想这样做。

Answer 1

您实际上可以使用纯 CSS 实现此目的。将两者都包含在包装器中并在 :focus 上显示它们 - 请注意，您还可以使用 + 运算符选择 DOM 兄弟。

select {
    display: block;
    visibility: hidden;
    transition: visibility 50ms;
}
textarea:focus + select,
select:focus {
    visibility: visible;
}

transition 防止 select 在获得焦点之前被隐藏。

这是一个 JSFiddle演示上面的代码。

编辑:

显然，您想让用户在不获得焦点的情况下处理 select。然而，浏览器一旦失去焦点就会立即关闭它，因此唯一的解决方案是使用一个永远不会自动关闭的自定义选择小部件。