当其他元素聚焦时输入失去焦点答案

【问题标题】：input lose focus when other element is focused当其他元素聚焦时输入失去焦点
【发布时间】：2023-03-27 16:20:02
【问题描述】：

我正在尝试仅使用 CSS 和 HTML 创建自定义组件。组件的行为类似于：当输入被选中（具有焦点）时，另一个容器打开。问题是当容器打开时输入失去焦点并且容器在第一次单击时关闭:(

那么当我在打开的容器上聚焦时，我怎样才能使输入焦点聚焦？

<div class="block">
    <label>Field</label>
    <input type="text" tabindex="-1"/>
    <div tabindex="-1" class="infront">
         Keep this bastard open.<br/>
        <br/>
        while clicking on this div
    </div>
</div>

CSS

.block{
    position: relative;
    display: inline-block;
    margin: 50px;
}

.infront{display: none;}

.block input[type="text"]:focus ~ .infront {
    display: block;
    position: absolute;
    top:100%;
    width: 80%;
    right: 0;
    background: #ccc;
    opacity:0.8;
}

Fiddle:

【问题讨论】：

对不起，我不能关注你，我真的不明白问题是什么
我认为您的代码运行良好
@MKAD 当输入聚焦时，“.infront”容器被打开，如果我点击进入因为输入失去焦点而隐藏的“.infront”容器。我需要的是，如果我单击内部，则打开该容器；如果单击该容器外部，则将其隐藏....
@Sharmila 不是真的，因为是的，“.infront”已打开，但如果您在该容器内单击将被隐藏，只有当我在该容器外单击时才需要隐藏。

标签： html css focus

【解决方案1】：

您还需要注意 .infront 容器状态的状态。

将您的 CSS 更新为此

.block input[type="text"]:focus ~ .infront
, .infront:hover
, .infront:active 
, .infront:focus {
    display: block;
    position: absolute;
    top:100%;
    width: 80%;
    right: 0;
    background: #ccc;
    opacity:0.8;
}

【讨论】：

感谢您的回答！

【解决方案2】：

我认为你不能只使用 HTML 和 CSS。您将需要一些像这样的 jquery 代码：

$(.block input[type=text]).on('focus', function(e) {
    $('.infront').show();
});

【讨论】：

不是真的，容器“.infront”是从我的 CSS 中显示的，所以不需要 jQuery 显示。我需要的是在“.infront”容器内部单击时保持打开状态，如果在该容器外部单击则隐藏容器...
@burebistaruler 你说得对，但是如果你想保持这个为显示：块，你必须用js改变它，然后如果你专注，它不会被删除