Javascript 输入号码时自动格式化SSN

我有一个文本字段，用户输入SSN号。当输入它自己时，它应该格式化。就像改变文本字段一样。。。它应该在显示器上以这种方式格式化

999-999-999

<input id="ssn"/>

<script type="text/javascript">
    $('#ssn').keyup(function() {
        var val = this.value.replace(/\D/g, '');
        val = val.replace(/^(\d{3})/, '$1-');
        val = val.replace(/-(\d{2})/, '-$1-');
        val = val.replace(/(\d)-(\d{4}).*/, '$1-$2');
        this.value = val;
    });
</script>

$（'#ssn'）.keyup（函数（）{
var val=此.value.replace（/\D/g'）；
val=val.replace（/^（\d{3}）/，“$1-”；
val=val.replace（/-（\d{2}）/，'-$1-'）；
val=val.replace（/（\d）-（\d{4}）。*/，“$1-$2”）；
this.value=val；
});

来自@kottenator的脚本几乎就在那里，但它每3位就将值打断一次，而不是像社会保险号码所需的000-00-0000那样，先是3位，然后是2位

我做了一些编辑，并对其进行了修改，使其能够正常工作。希望这有帮助

    <script type="text/javascript">
       $('#ssn1').keyup(function() {
          var val = this.value.replace(/\D/g, '');
          var newVal = '';
          if(val.length > 4) {
             this.value = val;
          }
          if((val.length > 3) && (val.length < 6)) {
             newVal += val.substr(0, 3) + '-';
             val = val.substr(3);
          }
          if (val.length > 5) {
             newVal += val.substr(0, 3) + '-';
             newVal += val.substr(3, 2) + '-';
             val = val.substr(5);
           }
           newVal += val;
           this.value = newVal.substring(0, 11);
        });
    </script>

$（'#ssn1'）.keyup（函数（）{
var val=此.value.replace（/\D/g'）；
var newVal=''；
如果（值长度>4）{
this.value=val；
}
如果（（val.length>3）和（&（val.length<6））{
newVal+=val.substr（0,3）+'-'；
val=val.substr（3）；
}
如果（值长度>5）{
newVal+=val.substr（0,3）+'-'；
newVal+=val.substr（3,2）+'-'；
val=val.substr（5）；
}
newVal+=val；
this.value=newVal.substring（0,11）；
});

我稍微修改了Dennis的脚本，删除了jquery元素。不确定为什么要添加前两个if子句，所以我将它们从这个函数中删除。此函数是使用下划线.js的Tianium SDK的侦听器。但是您应该能够修改它以与其他JSAPI一起使用

$.usernameField.addEventListener('blur', function(param) {

    var inputString = param.value;

    if (inputString.length === 9 && _.isNumber(parseInt(inputString, 10))) {

        var val = inputString.replace(/\D/g, '');

        var outputString = '';

        outputString += val.substr(0, 3) + '-';
        outputString += val.substr(3, 2) + '-';
        val = val.substr(5);
        outputString += val;

        $.usernameField.value = outputString;

    }
});

---

@Dennis的答案在这里是最好的，但是它使用JQuery来做选择器，OP在这篇文章上没有JQuery标记，只有JavaScript。以下是解决方案的VanillaJS版本（或者至少有一种方法：）

document.getElementById（“ssn”）.onkeyup=function（）{
var val=此.value.replace（/\D/g'）；
var newVal=''；
如果（值长度>4）{
this.value=val；
}
如果（（val.length>3）和（&（val.length<6））{
newVal+=val.substr（0,3）+'-'；
val=val.substr（3）；
}
如果（值长度>5）{
newVal+=val.substr（0,3）+'-'；
newVal+=val.substr（3,2）+'-'；
val=val.substr（5）；
}
newVal+=val；
this.value=newVal；
};

@Rost的答案是一个很好的开始，但有三个缺陷。在这个答案中，我修正了其中两个。缺陷：

当您尝试删除“-”时，它会立即重新出现。这是固定的

当用户键入错误的内容时，错误的文本在离开前会出现一秒钟。这也是固定的

以任何方式更改文本时，光标将移动到文本的末尾。这仍然是个问题

这是我找到的解决最后一个问题的最好建议。但是，它在这里不起作用，因为我们正在更改值中的字符数。我还没有算出正确的数学公式。如果我这样做，我会编辑这个答案

<input id="ssn"/>

<script type="text/javascript">
  $( "#ssn" ).on("input", function() {
    var val = this.value.replace(/\D/g, '');
    val = val.replace(/^(\d{3})(\d{1,2})/, '$1-$2');
    val = val.replace(/^(\d{3})-(\d{2})(.+)/, '$1-$2-$3');
    this.value = val.substring(0, 11);
  });
</script>

$（“#ssn”）。关于（“输入”，函数（）{
var val=此.value.replace（/\D/g'）；
val=val.replace（/^（\d{3}）（\d{1,2}）/，“$1-$2”）；
val=val.replace（/^（\d{3}）-（\d{2}）（.+）/，“$1-$2-$3”）；
this.value=val.substring（0,11）；
});

---

我不认为所有浏览器的所有版本都支持

input

事件。您可以改为使用

keyup

事件，但我找不到关于有多少浏览器支持它的信息。如果你这样做，问题2会回来，但那可能没问题。一些用户可能会发现，了解他们做错了什么很有帮助。

@knod在这里给出了最好的答案，但他们的解决方案有一个缺点，即人们无法键入自己的破折号

我修改了他们的答案，允许用户（可选）键入或删除他们自己的破折号，避免阻塞有效输入（并添加了一些注释来解释每个步骤）

函数格式ssn（ssn）{
//删除所有非破折号和非数字
var val=ssn.replace（/[^\d-]/g'，）；
//如果出现第二组中的数字，则添加第一个破折号
val=val.replace（/^（\d{3}）-？（\d{1,2}）/，“$1-$2”）；
//如果出现第三组中的数字，则添加第二个破折号
val=val.replace（/^（\d{3}）-？（\d{2}）-？（\d{1,4}）/，“$1-$2-$3”）；
//删除错位的破折号
val=val.split（“”）.filter（（val，idx）=>{
返回val！='-'| | idx==3 | | idx==6；
}).加入（“”）；
//强制执行最大长度
返回val.substring（0,11）；
}
//约束我们的职能
document.getElementById（“ssn”）.onkeyup=函数（e）{
this.value=formatSSN（this.value）；
}

实际上，社会保险号码的格式是

000-00-0000

。我已经更新了我的解决方案，以匹配

NNN-NN-NNNN

模式。这几乎就是问题所在，但从我的尝试来看，它有两个问题。首先，每当在SSN的中间碰到一个键时，光标就会转到文本的末尾。其次，除非按住“删除”键，否则当您在短划线上单击“删除”时，它会立即重新出现。我已经用一个解决方案修复了第二个，我将在下面展示，但是我用第一个解决方案遇到了麻烦。OP只在他们的标签中列出了JavaScript。您应该尽量不要在回答中混入其他API，因为它们可能对Tianium SDK和下划线一无所知。jsI喜欢它如何限制您可以输入的字符数。我刚刚读了这个解决方案，2年后：）是的，我的代码将输出格式化为

\d{3}-\d{3}-\d{3}-\d{3}

但问题中就是这样要求的。由于某种原因，我忘记了SSN有多少个字符。谢谢，@Dennis O'Neil/@Jason Hansen@knod只是好奇，你如何允许用户输入破折号？如果用户在破折号中键入，则会自动删除破折号
获取子字符串后，我尝试了

formattedValue.length==3${formattedValue}-`:formattedValue`
但是，这实际上会在退格时引起问题，因此无法显示破折号
document.getElementById("ssn").onkeyup = function() {
  var val = this.value.replace(/\D/g, '');
  var newVal = '';

  if(val.length > 4) {
    this.value = val;
  }

  if((val.length > 3) && (val.length < 6)) {
    newVal += val.substr(0, 3) + '-';
    val = val.substr(3);
  }

  if (val.length > 5) {
    newVal += val.substr(0, 3) + '-';
    newVal += val.substr(3, 2) + '-';
    val = val.substr(5);
  }

  newVal += val;
  this.value = newVal;
};

<input id="ssn"/>

<script type="text/javascript">
  $( "#ssn" ).on("input", function() {
    var val = this.value.replace(/\D/g, '');
    val = val.replace(/^(\d{3})(\d{1,2})/, '$1-$2');
    val = val.replace(/^(\d{3})-(\d{2})(.+)/, '$1-$2-$3');
    this.value = val.substring(0, 11);
  });
</script>