自动将光标从一个文本框移动到另一个文本框

Question

我正在制作一个Web应用程序，用于验证密码并显示一些值。一个文件需要输入四个密码才能通过验证。我将这些密码输入方式设计成与在支付网关中输入信用卡号码相同。在我的现有应用程序中，我输入一个密码，然后必须按Tab键或使用鼠标选择下一个文本框来输入下一个密码。请问如何使得鼠标光标在填写每个密码的最大值后自动跳转到下一个文本框，就像在支付网关中一样。

- Rajesh

---

请将JavaScript作为标签添加。因为这主要是用JavaScript完成的，以避免回传。 - Narendra

@ Narendra，你能否推荐一个链接，我可以在那里找到这种事件的JavaScript代码？ - Rajesh

已经有足够的答案了，你可以参考它们。这些包含JavaScript事件。你可以查看jQuery，它会更容易一些。http://api.jquery.com/keypress/ - Narendra

Answer 1

您可以像这样使用纯JavaScript：

<script type="text/javascript">
function ValidatePassKey(tb) {
  if (tb.TextLength >= 4)
    document.getElementById(tb.id + 1).focus();
  }
}
</script>

<input id="1" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="2" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="3" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="4" type="text" maxlength="4">

- rajeemcariazo

---

@ Rajeem 如果我有两个文本框，它可以工作。如果我有四个文本框该怎么办？我需要为其编写单独的JS吗？ - Rajesh

Answer 2

在我的当前应用程序中，我输入一个密码，然后必须按Tab键或使用鼠标来选择下一个文本框以输入下一个密码。

不要这样做。只需使用Control.Focus()方法即可。

在HTML中，您可以使用jQuery的focus()：

$("#textbox").focus();

- CodeCaster

---

我不确定我同意“不要那样做”的说法。自动跳转行为可能很烦人，而且并不适用于所有情况。用户知道何时准备好切换到另一个文本框，这不必是自动的。 - Cody Gray

@CodyGray 我理解这句话是指 OP 使用 SendKeys 和鼠标移动代码来改变 Windows 应用程序中的焦点。自动焦点移动在某些情况下确实很有用，例如在输入许可证密钥或信用卡信息时，即固定格式。 - CodeCaster

哦，那样的话，完全同意。那是一个可怕的想法。 :-) - Cody Gray

Answer 3

你也可以创建一个指令来获取位置移动

<a href="https://plnkr.co/edit/G6sFMM9vaR6nQfVaMI2E?p=preview">directive 1</a>

<a href="https://plnkr.co/edit/G32KUITspNp1qsq6gleI?p=preview">directive 2</a>

- Sibaram Sahu

Answer 4

您可以在文本框上使用JavaScript的Onchange事件（或者可能是JQuery），调用一个方法，在该方法中检查文本框的值是否等于最大值，然后将焦点设置在下一个文本框上。

- sohaiby

---

@sohaiby，你能推荐一个链接吗？我想找到这种事件的JavaScript代码。 - Rajesh

@Rajesh 在你的文本框上设置一个onChanged事件，该事件调用一个Javascript方法。请参考以下链接了解其工作原理： http://www.w3schools.com/jsref/event_onchange.asp - sohaiby

Answer 5

在下一个文本框上使用TextBox.Focus()方法。 使用第一个文本框的TextBox.TextChanged事件来测试是否应该更改焦点，并调用下一个文本框的Focus方法。

- Pharap

Answer 6

<script type="text/javascript">
$(document).ready(function(){
$("#1").keyup(function(){
    var text_lenght = $('#1').val().length;
    if (text_lenght == 3) {
        $('#2').focus();
    }
});

$("#2").keyup(function(){
    var text_lenght = $('#2').val().length;
    if (text_lenght == 3) {
        $('#3').focus();
    }
});

});
</script>

<input id="1" type="text" class="form-control" name="phone1" maxlength="3" >
<input id="2" type="text" class="form-control" name="phone2" maxlength="3" >
<input id="3" type="text" class="form-control" name="phone3" maxlength="4">

- DixitNatasha