12

我有一个电话号码文本框。我的电话号码应该是 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/

4

6 回答 6

29

由于您使用的是 jQuery，您可以尝试 jquery masked-input-plugin。

这里有一个 jsFiddle 供您使用，您可以在其中看到它是如何工作的。

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

实现不仅仅是简单的：

HTML：

<input id="ssn"/>

javascript:

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

更新：

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

于 2012-06-07T11:34:30.667 回答
7

据我所知，您真正需要做的就是：

$('#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;
}

箭头工作得很好。对于其他键（如删除、退格、移位等），请查看此页面。

举一个完整的例子：这是小提琴

于 2012-06-07T12:26:13.447 回答
2

对于格式 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为您的值。我希望这有帮助。

于 2020-06-08T12:13:41.067 回答
0

我在谷歌上搜索一种在 Javascript 中自动格式化电话号码的方法时发现了这个问题。接受的答案并不适合我的需求，自最初发布以来的 6 年中发生了很多事情。我最终找到了解决方案，并在这里记录下来以供后代使用。

问题

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

解决方案

查看Cleave.js。这是解决此问题以及许多其他数据屏蔽问题的一种非常强大/灵活且简单的方法。

格式化电话号码很简单：

var cleave = new Cleave('.input-element', {
    phone: true,
    phoneRegionCode: 'US'
});
于 2018-08-17T17:26:48.977 回答
-1 

$('#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;
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ssn" maxlength="10"/>

于 2017-11-13T11:33:01.753 回答
-2

您可以通过 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：然后脚本代码过去到你的脚本标签..

$(文档).ready(函数($) {

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

});

于 2016-02-09T09:52:18.400 回答