javascript - 在 FOCUS 上使用 Javascript 的 Auto Dash（用于电话号码格式）

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

前 2 个块很好，但如何限制最后一个块接受 4 位数字？

如果到目前为止有 3 位数字，它仍然是自动冲刺。

我不擅长 REGEX，所以任何想法都会受到赞赏。

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, '')
    ;
});

Answer 2

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

Answer 3

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

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

    });

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