Phone 使用 jquery 进行数字屏蔽 - 具有三个输入字段

Question

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

区号

Phone 字段 1

Phone 字段 2

我的问题是，当用户输入错误的 phone 个数字，然后想在中间插入一个数字时，应该不会影响其他输入。

示例：

如果用户输入为

第一个输入字段："abc"

第二个输入字段："def"

第三个输入字段："gh"

然后用户想在"d"&"e"中间输入"x"。那么输入应该接受输入为分别是 abc、dxe、fgh（它应该可以自动下一个输入字段焦点）。

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

谢谢。

Answer 1

试试下面的代码：（我使用 id 作为输入，你需要从输入框中删除 maxlength 属性）

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

Answer 2

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

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

Phone number masking using jquery - with three input fields