使用 jquery 屏蔽电话号码 - 具有三个输入字段答案

【问题标题】：Phone number masking using jquery - with three input fields使用 jquery 屏蔽电话号码 - 具有三个输入字段
【发布时间】：2015-07-29 12:37:52
【问题描述】：

我想使用 jquery/javascript 创建电话字段掩码。我尝试了几个 jquery 掩码插件。仍然想为此找到更好的解决方案。我有三个美国输入字段（我必须有三个输入字段）。

区号

电话字段1

电话字段2

我的问题是，当用户输入错误的电话号码，然后想在中间插入一个数字时，它应该可以在不影响其他输入的情况下工作。

例子：

如果用户输入为

第一个输入字段：“abc”

第二个输入字段：“def”

第三个输入字段：“gh”

然后用户想在“d”和“e”中间输入“x”。然后输入应该接受输入为 abc, dxe, fgh（它应该工作在自动下一个输入字段焦点）。

请注意：三个输入字段是必需的。

谢谢。

【问题讨论】：

【解决方案1】：

试试 this link

$('#two').val($('#one').val().substring(3,4)+$('#two').val());
$('#one').val($('#one').val().substring(0,3));
$('#two').focus();

仅在一个textbox 上使用它。我可以在多个文本框上使用它吗？ maxlength=3 不起作用。您需要将最后一个元素获取到另一个文本框

【讨论】：

这对我帮助很大。谢谢:) 这会将当前输入框的值移动到下一个输入框。但是，即使我插入了第二个数字，当前输入框中的“光标”也会移动到当前输入框的末尾（这可能是因为复制子字符串值并粘贴它）。对此的任何帮助也将不胜感激。

【解决方案2】：

试试下面的代码：（我用id输入，你需要去掉输入框中的maxlength属性）

$("#first").on("input",function(e){
    if($("#first").val().length>3){
        $("#first").val($("#first").val().substring(0,3));
    }
});

【讨论】：