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

【问题标题】：Automatically Move Cursor from One Textbox to Another自动将光标从一个文本框移动到另一个文本框
【发布时间】：2013-07-08 08:50:10
【问题描述】：

我正在制作一个验证密码并显示一些值的 Web 应用程序有四个密码用于输入文件验证它，我正在输入密码，就像我们在支付网关中输入信用卡号一样。在我目前的应用程序中，我输入了一个密码，然后必须按 Tab 或使用鼠标我必须选择下一个文本框才能输入下一个密码，如何使鼠标光标在其最大值后自动从一个文本框跳转到另一个文本框像支付网关一样填写

【问题讨论】：

请添加javascript作为标签。因为这主要是在 javascript 中完成的，所以可以避免回发。
@Narendra Can U 建议一个链接，我可以在其中找到此类事件的 Javascript
已经添加了足够多的答案，您可以参考。这些包含 javascrupt 事件。您可以检查 jQuery，这更容易一些。 api.jquery.com/keypress

标签： javascript html

【解决方案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">

【讨论】：

@Rajeem 如果我有两个文本框，它会工作我有四个我要做什么我有写单独的 JS 吗？

【解决方案2】：

在我目前的应用程序中，我输入了一个密码然后必须按 Tab 或使用鼠标我必须选择下一个文本框才能输入下一个密码

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

在 HTML 中，你可以使用 jQuery 的focus():

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

【讨论】：

我不确定我是否同意“不要那样做”。自动跳跃行为可能很烦人，并不适合所有情况。用户知道如何在准备好后切换到另一个文本框，它不必是自动的。
@CodyGray 我将该句子解释为 OP，使用 SendKeys 和鼠标移动代码来更改 Windows 应用程序中的焦点。自动焦点移动可能很有用，例如在输入许可证密钥或信用卡信息时，即固定格式。
哦哦，好吧，在这种情况下，是的，完全同意。这是一个可怕的想法。 :-)

【解决方案3】：

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

【讨论】：

@sohaiby 能否推荐一个链接，我可以在其中找到此类事件的 Javascript
@Rajesh 在您的文本框上设置一个 onChanged 事件，该事件调用 Javascript 方法。在此链接中查看其工作原理w3schools.com/jsref/event_onchange.asp

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案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">

【讨论】：