Jquery中的自动格式化电话号码

Question

我有一个电话号码文本框.我的电话号码应该是XXX-XXX-XXX,就像这种格式一样.

我得到了XXX-XXX-XXX格式的解决方案,但我不知道如何修改该代码.

$('#ssn').keyup(function() {
    var val = this.value.replace(/\D/g, '');
    var newVal = '';
    while (val.length > 3) {
      newVal += val.substr(0, 3) + '-';
      val = val.substr(3);
    }
    newVal += val;
    this.value = newVal;
});

http://jsfiddle.net/ssthil/nY2QT/

Answer 1

既然你正在使用jQuery,你可以试试jquery masked-input-plugin.

有一款适合您的jsfiddle 在这里,你可以看到它是如何工作的.

可以在此处找到GitHub上项目的源代码.

实现不仅仅是简单:

HTML:

<input id="ssn"/>

JavaScript的:

$("#ssn").mask("999-999-999");

更新:

在这里可以找到另一个好的.

Answer 2

据我所知,你真正需要做的就是:

$('#ssn').keyup(function()
{
    this.value = this.value.replace(/(\d{3})\-?/g,'$1-');
});

但这只会在人们输入数字时起作用,所以我建议引入一个额外的检查:

$('#ssn').keyup(function(e) {
  if ((e.keyCode > 47 && e.keyCode < 58) || (e.keyCode < 106 && e.keyCode > 95)) {
    this.value = this.value.replace(/(\d{3})\-?/g, '$1-');
    return true;
  }
  
  //remove all chars, except dash and digits
  this.value = this.value.replace(/[^\-0-9]/g, '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="ssn">

关于正则表达式的更多内容/(\d{3})\-?/g:
这将自己替换3位数的组,然后是破折号.括号创建匹配数字的后引用,用于替换字符串($1-- > $ 1是后引用).
请注意,也会替换可选的破折号,但不包括在后引用中.如果输入是123和取代模式会是这样的/(\d{3})/g,或/(\d{3}\-?)/g该值将成为123-4,123--45,123---456等等,增加一倍每次破折号.

警告:
这会给用户一些悲伤,因为箭头键等不起作用.幸运的是,这是一个简单的修复:只需在函数顶部添加以下代码:

if (e.keyCode > 36 && e.keyCode < 41)
{
    return true;
}

箭头工作得很好.对于其他键(如删除,退格,移位等...),请检查此页面.

完整的例子:这是小提琴