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给你here你可以看到它是如何运作的。

可以找到GitHub上项目的源代码here。

实施不仅仅是简单：

HTML：

<input id="ssn"/>

的javascript：

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

<强>更新：

可以找到另一个好的here。

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- - ＆gt; $ 1作为后引用）。
请注意，可选的短划线也会被替换，但不会包含在后面的参考中。如果输入为123，并且替换模式类似于/(\d{3})/g或/(\d{3}\-?)/g，则值将变为123-4，123--45，{{1}等等，每次都加倍破折号。

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

123---456

箭头工作正常。其他键（如删除，退格，移位等......）check this page。

完整示例：here's the fiddle

Answer 3

对于格式XXX-XXX-XXXX，这是一个简单的解决方案：

if(this.value.trim().length <= 8){
    this.value = this.value.replace(/(\d{3})\-?/g,'$1-');
 }

这里是一个示例，您不需要任何框架或库或npm：

this.phone.addEventListener('keyup', event => {

        if(this.phone.value.trim().length <= 8){
            this.phone.value = this.phone.value.replace(/(\d{3})\-?/g,'$1-');
        }
    }

如果您愿意，也可以这样做：

 this.phone.addEventListener('keyup', event => {

        if(this.phone.value.trim().length <= 8){
            this.phone.value = this.phone.value.replace(/(\d{3})\-?/g,'$1-');
        }else{
            this.phone.value = this.phone.value.replace(/(\d{4})\-?/g,'$1');
        }
    }

将此this.phone替换为您的值。希望对您有所帮助。

Answer 4

我在搜寻一种使用Javascript自动格式化电话号码的方法时发现了这个问题。接受的答案对我的需求而言并不理想，自最初发布以来的6年中发生了很多事情。我最终找到了解决方案，并在此处记录以备后用。

问题

我希望我的电话号码html输入字段在用户输入时自动格式化（屏蔽）该值。

解决方案

签出Cleave.js。这是解决此问题以及许多其他数据屏蔽问题的非常强大/灵活便捷的方法。

格式化电话号码非常简单：

var cleave = new Cleave('.input-element', {
    phone: true,
    phoneRegionCode: 'US'
});

Answer 5

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ssn" maxlength="10"/>

＆＃13;

Answer 6

您可以通过3个简单步骤在任何字段上设置输入掩码：

1：首先调用这些库 http://code.jquery.com/jquery-1.7.2.min.js” “https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js”

2：创建这样的简单表单：

<form> <input type="text" name="phone" id="phone" /> </form>

3：然后脚本代码进入你的脚本标签..

$（document）.ready（function（$）{

$('#phone').mask("99999-9999999-9",{placeholder:""});

}）;

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

6 个答案: