当内部输入为焦点时Div改变边框颜色（焦点状态）

我在div中有两个输入，并设置tabindex=1使其可以聚焦。当内部输入为焦点时Div改变边框颜色（焦点状态）

<div class="wrapper" tabindex="1"> 
    <input class="input" type="text"> 
    <input class="input" type="text"> 
</div>

而且我SCSS：

div { 
    border: solid 1px lightgray; 
    padding:3px; 
    display: inline-block; 
    background-color: #fff; 
    &:focus { 
    outline: none; 
    border: solid 1px blue; 
    } 
} 
input { 
    border: solid 1px transparent; 
    &:focus { 
    outline: none; 
    border-bottom: solid 1px red; 
    } 
}

这样，格不会当输入是重点关注。所以，我使用jQuery来做到这一点。

(function($) { 
    $(".input").on("focus", function() { 
    $(this).parent("div").addClass("focus"); 
    }); 
    $(".input").on("focusout", function() { 
    $(this).parent("div").removeClass("focus"); 
    }); 
})(jQuery);

我不知道是否有更好的办法，使这个？

Here是我的JSFiddle。

来源

2017-03-02 Cony LuLu

代码已经实现了你正在尝试做的事情。你想做什么“更好”？你要加快速度，还是要保持易读性？无论哪种方式，你的功能已经几乎是最好的方式去做你想做的事情......或者你是否试图在输入焦点上改变'.wrapper'的边界？ –

@ObsidianAge有没有可能让这个没有js？是的，我试图在输入焦点上改变'.wrapper'的边界。 –

为什么你想让DIV可以聚焦？如果用户选中该选项并将其颜色从灰色更改为蓝色，但用户仍然无法输入，直到他们再次选择了一个他们看不到的输入为止。（另外，tabindex为1会将其拉出标准标签序列，这通常是一个坏主意。） – nnnnnn

当前选项卡选择div（给它一个蓝色边框）。但是你不能在那里输入任何东西，所以你必须再次点击标签，这对我来说似乎毫无意义。所以我给了输入的tabindex属性，而不是包装：

<div class="wrapper"> 
    <input class="input" tabindex="1" type="text"> 
    <input class="input" tabindex="2" type="text"> 
</div>

但除此之外，我不知道有什么办法让包装亮点，除了使用JavaScript，因为你已经做了。

来源

2017-03-02 02:49:55

谢谢，我没有想过这一点！起初，我只是想让它具有焦点状态（当输入焦点，并在同一时间使div对焦）。 –

http://stackoverflow.com/a/1014958/1544886确认截至2017年2月没有父母选择器，所以JS是唯一的选择（无论如何''焦点'''悬停'可以使用CSS滴答影响父元素。） –

当内部输入为焦点时Div改变边框颜色（焦点状态）

回答

相关问题