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位数，它仍然会自动显示。

我不擅长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 ...

这继续。：（

因此，我找到了一个更好，更完美的解决方案。只需添加＆quot; maxlength = 12＆＃39;你的输入元素!!查看小提琴链接：

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

在FOCUS上使用Javascript自动短划线（用于电话号码格式）

5 个答案: