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

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);