jquery - 如何创建一个万无一失的电话号码字段 - 并考虑复制/粘贴

Question

我想将我的电话号码字段拆分为 3 个字段（区号、下一个 3、下一个 4）。我想说明几个条件：

1. 字段达到指定位数后，光标会自动移动到下一个字段。
2. 如果用户在第一个字段中粘贴了他们的整个电话号码，jQuery 将相应地分配这 10 位数字。

我已经得到 #1 的工作，没问题：如何在 Silverlight 中将光标移动到下一个字段自动而不按 Tab 键？

然而，#2 被证明超出了我的 jQuery 联盟 - 所以我在这里请求一些帮助。

其次，我想知道我是否在这里忽略了什么？我不这么认为，但我想我会把它扔在那里。

我应该补充一点，我已经考虑过这个：http ://digitalbush.com/projects/masked-input-plugin/#demo - 但我倾向于认为以上内容更能让用户满意......也许我错了.

更新- 仅限美国的电话号码 =)。

更新 2 - 一位朋友给我发了这个： http: //www.mathachew.com/sandbox/jquery-autotab/

Answer 1

像这样 - 获取字段值，删除非数字字符，测试长度，并在必要时将其拆分：

$('#telephone1').on('change',function(e) {
    var $this = $(this),
        phone = $this.val().replace(/\D/g, ''); // remove non-numeric characters
    if (phone.length > 3) {
        $('#telephone3').val(phone.substr(6,4));
        $('#telephone2').val(phone.substr(3,3));
        $('#telephone1').val(phone.substr(0,3));
    } else {
        $('#telephone1').val(phone);
    };
});

http://jsfiddle.net/v6was/

Answer 2

var num = $('.number').html();
var first = num.substr(0,3);
var second = num.substr(3,4);
var third = num.substr(7,4);
var newNum = first + ' ' + second + ' ' + third;
$('.number').html(newNum);