使用Javascript在FOCUS上自动填写电话号码格式

Question

我正在尝试实现一个针对格式 XXX-XXX-XXXX 的自动破折号功能。

以下是我目前所拥有的：

$('.telnumber').keyup(function() {
  var foo = $(this).val().split("-").join(""); // remove hyphens
  foo = foo.match(new RegExp('.{1,3}', 'g')).join("-");
  $(this).val(foo);
});

前两个块没问题，但是我该如何限制最后一个块只接受4位数字？

如果目前只有3位数字，它仍然会自动添加破折号。

我不擅长正则表达式，所以任何想法都将不胜感激。

- xirukitepe

---

我建议在继续操作之前，尝试按下例如退格键来取消误输入的数字，以免破坏用户体验。 - Esailija

谢谢。但它仍然强制使用自动破折号。 - xirukitepe

请注意，使用此类“解决方案”时，您无法使用箭头键返回并修正错误输入的数字。我建议在模糊事件上使用连字符进行格式化，而不是在输入时进行格式化。 - Strille

Answer 1

在这里我认为最好的解决方案是，任何非数字字符都将被忽略，而且末尾也不会有额外的破折号。

$('.telnumber').keyup(function() {
    this.value = this.value
        .match(/\d*/g).join('')
        .match(/(\d{0,3})(\d{0,3})(\d{0,4})/).slice(1).join('-')
        .replace(/-*$/g, '')
    ;
});

- redexp

---

干得好。有一个问题是它不允许使用左箭头键移动光标。你能给出一个解决方案吗？ - Viku

保存先前的值并将其与当前值进行比较，如果相同，则只需return;。 - redexp

Answer 2

foo = foo.match(new RegExp('.{1,4}$|.{1,3}', 'g')).join("-");

- Anirudha

---

干得好！只有一个问题：在“.{1,3}”之前加上“.{1,4}$”，它将优先于它并正常工作。 - Broxzier

Answer 3

既然您已经在使用jQuery，您可能想要查看这个jQuery插件： http://digitalbush.com/projects/masked-input-plugin/

- Strille

Answer 4

仅仅按照第一个答案中的正则表达式，我得到了以下结果：

xxx-xxx-xxx-xxx-xxx...

这种情况一直持续着。 :(

因此，我找到了一个更好的、完美运行的解决方案。只需在输入元素中添加“maxlength=12”即可！请查看下面的链接：

http://jsfiddle.net/juspC/218/

<input type="text" class="telnumber" maxlength="12" />

$('.telnumber').keyup(function() {
    foo = $(this).val().split("-").join(""); // remove hyphens

        foo = foo.match(new RegExp('.{1,4}$|.{1,3}', 'g')).join("-");

        $(this).val(foo);

    });

- anusreemn

---

干得好。有一个问题是它不允许使用左箭头键移动光标。你能否提供一个解决方案？ - Viku

在这里，每次键盘按键抬起时，输入字段中输入的值都会被虚线(-)表达式替换，这就是为什么您无法移动光标的原因。我想这是唯一可能的方法。但是，您可以通过鼠标单击手动放置光标并编辑该值，直到达到最大长度。同时，如果您找到任何替代方案，请随时告诉我.. :) 祝编码愉快.. B-) - anusreemn

我过滤了退格键和左箭头的关键事件，这样当我们点击这两个键时，上面的事件就不会触发，它可以正常工作。 - Viku

Answer 5

基于@Anirudha的答案。

我看到其他用户在询问光标问题，如果我偏离主题，我很抱歉。

对于那些寻找电话验证功能的人：

将@Anirudha的正则表达式放置在.on('input')而不是.keyUp()中将解决光标问题（因此仅在更改内容时更新值）。您还可以切片并将其限制为10位数字。

$('.telnumber').on('input', function() {
  var foo = $(this).val().split("-").join("").slice(0,10); // remove hyphens
  foo = foo.match(new RegExp('.{1,4}$|.{1,3}', 'g')).join("-");
  $(this).val(foo);
});

- Justin Reigel