javascript - 单击跨度时，关注跨度内的第一个表单元素

Question

单击跨度时，我无法弄清楚如何关注跨度内的第一个表单元素。我已经包含了我的代码，我也搞砸了“最接近”但没有运气。

<form>
<span>
  <input id="content" type="text">
  <label for="content">Content</label>
</span>
</form>

$('span').click(function() {
    $(this).find('input').focus()
});

任何帮助表示赞赏。

Answer 1

在回答您的实际问题之前：有一种方法可以实现您正在尝试做的事情，甚至不需要任何 JavaScript。

如果您将输入字段包装在标签标签中，单击标签将自动将焦点放在该字段上。

<form>
    <label>
        Content
        <input id="content" name="content" type="text">
    </label>
</form>

---

如果您坚持通过 JavaScript/jQuery 执行此操作，则必须确保仅在 DOM 准备好后附加点击处理程序：

$(document).ready(function () { // Or equivalent: $(function() { ... });
    $('span').click(function () {
        $(this).find('input:first').focus(); // :first makes sure only the first input found is selected
    });
});

Answer 2

为什么不使用标签来触发此功能，span它将仅涵盖label，input因此，如果我理解正确，您希望将焦点设置在input即使用户单击时lable也可以这样实现：

<form>
    <span>
       <input name="content" id="content" type="text">
       <label for="content">Content</label>
    </span>
</form>

但是，如果您正在尝试做其他事情，那么：

$(document).ready(function(){
   $('span').click(function() {
     $(this).find('input:first').focus();
   });
});

Answer 3

确保在加载 DOM 后调用您的 js

<script type="text/javascript">
  $(function(){
    $('span').click(function() {
      $(this).find('input').focus()
    });
  });
</script>