Question

我正在尝试仅使用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:

Answer 1

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

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

当其他元素被聚焦时，输入失去焦点

1 个答案: