Question

我有一个带有tabindex属性的div，可以让它获得焦点，当它这样做时，它会通过JS事件监听器进行扩展（以显示几个不同的选项），为它分配类{{1 }}。现在，嵌套在div中的是一个文本输入（用于让用户指定自定义值而不是默认选项），当接收焦点时，div触发模糊事件，但我不希望div是发生这种情况时会缩小。

你会如何解决这个问题？

理想情况下，input元素的blur事件也会确定div是否是新的活动元素，在这种情况下不会缩小div。

Answer 1

这个解决方案有点过时，但应该为遇到此问题的其他人提供有效的解决方案。

.color-picker（这是要展开的div）有一个tabindex属性可以让它被聚焦，而onfocus它会调用一个函数来添加类焦点指向相关元素。此外，该函数还使用类close-color-picker-overlay创建一个空div。那个div有：

position: fixed bottom，left，right＆amp; top个样式都设置为0，使div覆盖整个页面。
z-index样式1小于.color-picker.focus的
tabindex属性超过.color-picker。

这意味着只要用户点击.color-picker之外或关注其他内容（例如通过点击标签），.close-color-picker-overlay就会获得焦点。对于那个事件，有一个事件监听器为querySelector运行.color-picker.focus并从它找到的元素中删除类焦点。然后它从DOM中删除.close-color-picker-overlay，将所有内容重置为原始状态。

这样，将输入元素聚焦在.color-picker内，不会干扰任何事情。

我还a JSFiddle更清楚地说明了我是如何解决这个问题的（如果有人遇到类似问题的话）。

Answer 2

我在创建可聚焦的上下文菜单时遇到了同样的问题。主要问题是当焦点/模糊触发时，下一个元素尚未聚焦，因此无法确定它是否是模糊元素的子元素。我想我可以延迟焦点输出功能，直到它出现：

$('.something').on('blur', function() {
    var that = $(this);
    setTimeout(function() {
        if (that.has(document.activeElement).length)) {
            return;
        }
        // Some close logic.
        that.hide();
    }, 0),
});

setTimeout(fn, 0)计划在任何当前挂起的代码（在这种情况下包括聚焦其他元素）之后执行关闭逻辑。似乎至少在FF 18.0中为我工作;目前这里没有任何浏览器，但我认为它也适用于其他浏览器。

div，使用嵌套的输入元素扩展焦点。如何使div扩展在输入焦点上持续存在？

2 个答案: