javascript - 电话号码文本框问题

Question

我有三个用于电话号码的文本框。 Textbox1 最大长度为 3，第二个最大长度为 3，第三个最大长度为 4。当用户在 TextBox1 中键入 three digits 时，cursor moves 自动移动到 TextBox2 TextBox2< 也会发生同样的事情 以及 TextBox3。我在 keyup 事件中处理这个功能。

问题是，当我按下

Ctl + a

Ctl + c

Ctl + v

光标自动移动到 Textbox3，因为 Textbox 达到它的 Max Length 并将其导航到下一个 Textbox。我想将其保留在 TextBox1 上。有什么想法吗？

我的代码如下。

<asp:TextBox runat="server" ID="tbPh2" MaxLength="3" onkeyup="Mainautotab2(this, 0, event);"/>
<asp:TextBox runat="server" ID="tbPh22" MaxLength="3" onkeyup="Mainautotab2(this, 1, event);"/>
<asp:TextBox runat="server" ID="tbPh222" class="midium" MaxLength="4" />


function Mainautotab2(original, destination, evt) {
         if (document.getElementById('<%= tbPh2.ClientID%>').value.length == 3 && document.getElementById('<%= tbPh22.ClientID%>').value.length == 3) {

         if (destination == 0)
             document.getElementById("<%=tbPh22.ClientID %>").focus();
         if (destination == 1)
             document.getElementById("<%=tbPh222.ClientID %>").focus();
     }
}

Answer 1

我建议检查按下的控制键的使用情况，see this post有关如何执行此操作的更多信息。如果您检测到按下了 CTRL 键，则不要移动到下一个文本框。

或者，如果您只希望“移至下一个”功能在用户键入第 3 个字符时起作用，那么也许可以在按下键时检查字符数。确保这个新按键在第 3 个字符中，而前一个按键是第二个字符(即在某处存储 lastKeyPressCount)

---

因为我是个好人!这是我自己的一些作品:

HTML

<input type="text" id="1" maxlength="3" data-nextid="2"/>
<input type="text" id="2" maxlength="3" data-nextid="3"/>
<input type="text" id="3" maxlength="4"/>​

JavaScript(带 JQuery)

$("input").keyup(function(e){
    if(e.ctrlKey || e.which == 17 || e.which == 65 || e.which == 67 || e.which == 86){
        return;        
    }
    if($(this).val().length == $(this).attr("maxlength")){
        var nextid = $(this).data("nextid");
        if(nextid){
              $("#" + nextid).focus();       
        }
    }
});​

请记住，除了字母 A、C 和 V 之外，此代码已专门设置为忽略 CTRL 键。

See here for a working example