javascript - 当我在我的页面上隐藏一个元素时，光标会移动到顶部而不是下一行。我该如何阻止呢？

Question

我有一个表单，其中有一个复选框，用于确定是否应显示文本框(称之为“text1”)。它们位于同一条线上，以及指示它们用途的跨度。在其上方的一行中还有另一个文本框(“text2”)，如果设置为 0，则隐藏 text1 及其对应的复选框和范围。此表单专为希望轻松浏览它的人而设计，就像他们当前的系统一样。我的问题是，当您将 text2 设置为 0 时，它会将光标重置到页面顶部，因此他们必须在他们已经完成的许多字段中切换以返回到原来的位置。我该如何阻止呢？下面是一些示例代码:

HTML

<form>
    <input type="text" id="text0" tabindex = 1/>
    ....
    <table>
     <tr>
      <td>
      <input type="text" id="text2" tabindex = 2/>
      <input type="checkbox" id="check1" tabindex = 2/>
      <span id="span1" tabindex = 2>Span Text</span>
      <input type="text" id="text1" tabindex = 2/>
      <input type="text" id="text3" tabindex = 2 readonly/>
      </td>
      <td>
      <input type="text" id="text4" tabindex = 3/>
      <input type="text" id="text5" tabindex = 3/>
      </td>
     </tr>
     <tr>
      <td>
      <input type="text" id="text6" tabindex = 2/>
      <input type="text" id="text7" tabindex = 2/>
      </td>
      <td>
      <input type="text" id="text8" tabindex = 3/>
      <input type="text" id="text9" tabindex = 3/>
      </td>
     <tr>
    </table>
</form>

CSS:

#text1 {
 visibility:hidden;
}

JS:

$("#text2").change(function() {
    if ($(this).val() == 0) {
       $('#check1').css("visibility", "hidden");
       $('#span1').css("visibility", "hidden");
       $('#text1').css("visibility", "hidden");
    }
    else {
       $('#check1').css("visibility", "visible");
       $('#span1').css("visibility", "visible");
       $('#text1').css("visibility", "visible");
    }
});

Answer 1

我没有看到任何光标问题，但我修复了您的 jQuery 和 html 代码。运行这个片段:

$("#text2").on('keyup',function(){
  if ($(this).val() == '0') {
    $('#check1').css("visibility", "hidden");
    $('#span1').css("visibility", "hidden");
    $('#text3').attr('tabindex', '2');
    $('#text4').attr('tabindex', '3');
  } else {
    $('#check1').css("visibility", "visible");
    $('#span1').css("visibility", "visible");
    $('#text1').css("visibility", "visible");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="textbox" id="text2" placeholder="text 2" tabindex = 1/>
  <input type="checkbox" id="check1" tabindex = 2/>
  <span id="span1">Span Text</span>
  <input type="textbox" id="text3" tabindex= 3/ placeholder="text 3">
  <input type="textbox" placeholder="text 4" id="text4" tabindex= 4/>
</form>