Question

我有一个表格，其中包含两个名字和输入框的输入框。

当我单击“姓氏”标签时，光标将对焦于“名字”字段（而不是预期的“姓氏”字段）。我该如何解决这个问题？

$(document).on('click', 'a', function() {
  $('div.tabClass').addClass('hide');
  $($(this).attr('href')).removeClass('hide');
} );

  .hide {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<form action='' method='POST'>
  <ul>
    <li>
      <a href='#first'>
        First Tab
      </a>
    </li>
    <li>
      <a href='#secound'>
        Second Tab
      </a>
    </li>
    <li>
      <a href='#third'>
        third Tab
      </a>
    </li>
    <li>
      <a href='#fourth'>
        Fourth Tab
      </a>
    </li>
  </ul>
  <div id='first' class='hide tabClass'>
    <label>
      First Name :
      <input type='text' name='name' id='name'>
      <br/>
      <label>
        Last Name :
        <input type="text" name='sname' id="sname">
        <input type="submit" value="Click">
  </div>
</form>

Answer 1

您需要将标签与输入字段相关联。

<label for="name">
    First Name :
    <input type="text" name="name" id="name">
</label>

<label for="sname">
    Last Name  :
    <input type="text" name="sname" id="sname">
</label>

正如评论中提到的@ Sumurai8，<label>元素需要一个结束标记，代码中缺少该标记。

单击表单标签会聚焦错误的输入框

1 个答案: