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

Question

我在div中有两个输入，并设置tabindex=1以使其可聚焦。

<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;
  }
}

这样，当输入成为焦点时，div不会聚焦。 所以，我使用jQuery来实现这一点。

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

我想知道是否有更好的方法来制作它？

Here是我的JSFiddle。

Answer 1

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

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

但除此之外，我不知道如何使用javascript创建包装器高亮显示，就像你已经完成的那样。