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

2019年7月27日 230次阅读

我有一个文本框.当用户聚焦文本框时,我会调出一个帮助程序来帮助他们填写文本框.当文本框模糊时,帮助程序会消失.

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

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

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

最佳答案 你可以用纯CSS实现这一点.将两者都包含在包装器中并将其显示在：focus – 请注意,您还可以使用运算符选择DOM兄弟.

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

转换可防止在接收焦点之前隐藏选择.

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

编辑：

显然,您希望让用户在没有获得焦点的情况下处理选择.但是,浏览器一旦失去焦点就立即关闭它,因此唯一的解决方案是使用永远不会自动关闭的自定义选择窗口小部件.

点赞