Question

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

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

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

编辑：我真的宁愿避免输入失去焦点。当输入没有聚焦时，帮助器的其他功能实际上没有意义。即使输入没有聚焦，我决定只在你点击组合框后显示帮助，但我决定不想这样做。

Answer 1

你可以用纯CSS实现这一点。将它们包含在包装器中并在:focus上显示它们 - 请注意，您还可以使用+运算符选择DOM兄弟。

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

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

这是JSFiddle演示上述代码。

修改

显然，您希望用户在没有获得关注的情况下处理select。但是，浏览器一旦失去焦点就立即将其关闭，因此唯一的解决方案是使用自动关闭的自定义选择窗口小部件。

Answer 2

您可以从组合框本身复制显示/隐藏功能，因此如果选择了组合框，则帮助程序会保留。

使用jQuery看起来像：

$("input, select").focus(function(){
    $("div").show();
});
$("input, select").blur(function(){
    $("div").hide();
});

fiddle

停止窃取焦点而不阻止组合框打开

2 个答案: