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的方法。

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

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

单击跨度时，专注于跨度内的第一个表单元素

3 个答案: