强制关注兄弟输入

Question

我目前正在通过Wordpress使用联系表单插件，因此输出的HTML和JS如下所示：

$('.form .form--field label').click(function() {
  $(this).parents('.form--field').addClass('form--field--focus');
  $('input').filter(':first').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form--field form--field__firstname">
  <label for="firstname" class="form--field__label">First Name</label>
  <span>
    <input type="text" name="firstname">
  </span>
</div>

这个设计让我对它有点不耐烦但无论如何，我试图弄清楚当用户点击标签时如何强制关注相应的输入。目前，这就是我所处的位置。如果有人有任何意见或建议，将不胜感激。

Answer 1

在for上的<label>属性寻找id而不是name。以下示例应该可以在没有JavaScript的情

<div class="form--field form--field__firstname">
  <label for="firstname" class="form--field__label">First Name</label>
  <span>
    <input type="text" id="firstname" name="firstname">
  </span>
</div>

虽然如果你真的想用JavaScript / JQuery做这个并且不被束缚到使用标签，你可以这样使用$(this).next().children().focus();

$('.form--field__label').click(function() {
    $(this).next().children().focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form--field form--field__firstname">
  <label class="form--field__label">First Name</label>
  <span>
    <input type="text">
  </span>
</div>

<div class="form--field form--field__secondname">
  <!-- using a span instead of label as an example !-->
  <span class="form--field__label">Second Name</span>
  <span>
    <input type="text">
  </span>
</div>

Answer 2

设置输入id =“firstname”，因为你想要专注于标签点击。这是html中的内置功能。

    <input type="text" id="firstname" name="firstname">

更多细节在这里https://www.w3schools.com/tags/tag_label.asp

对于多个输入，您可以像这样使用它

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

如果你仍然坚持，你可以像这样使用它

$('.form--field label').click(function() {

    //It will look next sibling which is span and then find input in it and then focus it
    //so it doesn't focus on other children elements
    $(this).next('span').find('input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form--field form--field__firstname">
  <label class="form--field__label">First Name</label>
  <span>
    <input type="text" name="firstname">
  </span>
  <br>
  <label class="form--field__label">Last Name</label>
  <span>
    <input type="text" name="lastname">
  </span>
</div>