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

我在一个div中有两个输入，并设置

tabindex=1

，使其可聚焦

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

这样，当输入被聚焦时，div将不会聚焦。 因此，我使用jQuery来实现这一点。

我想知道有没有更好的办法

---

是我的JSFIDLE。

当前，选项卡选择

div

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

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

---

但是除此之外，我不知道有什么方法可以让包装突出显示，除了javascript，正如您已经做的那样。

代码已经实现了您想要做的。你到底想让“更好”做什么？你是追求速度，还是追求清晰？无论哪种方式，你的函数已经是你尝试去做的最好的方式了。。。或者您正在尝试更改输入焦点上

.wrapper

的边框？@obsidiange是否可以在没有js的情况下进行此操作？是的，我正在尝试更改输入焦点上

.wrapper

的边框。为什么要使DIV可聚焦？如果用户对它进行标签操作，并且它的颜色从灰色变为蓝色，这会让用户感到有点困惑，但他们仍然无法键入，直到他们再次对一个他们看不见的输入进行标签操作。（另外，tabindex为1会将其从标准制表符序列中拉出，这通常是个坏主意。）@nnnnnn首先，我只想使其具有焦点状态（当输入焦点时，同时使div焦点）。现在，我认为这真的是一个糟糕的方式！谢谢，我还没想过这一点！！首先，我只想使它具有焦点状态（当输入焦点时，同时使div焦点）。确认从2017年2月起没有父选择器，因此JS是唯一的选项（对于

focus

无论如何…

hover

可以使用CSS勾号影响父元素。）

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

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