javascript - 当我在页面上隐藏元素时，光标会跳至顶部，而不是下一行。如何停止呢？

我有一个带有复选框的表单，该复选框用于显示是否应显示文本框（称为“ 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");
    }
});

最佳答案

我没有看到任何游标问题，但是我修复了您的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>

关于javascript - 当我在页面上隐藏元素时，光标会跳至顶部，而不是下一行。如何停止呢？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35591933/