Question

我有一个文本字段，用户输入SSN号码。进入自己时应该格式化。喜欢在textField的更改中......它应该以这种方式在显示器上格式化999-999-999。

Answer 1

来自@kottenator的脚本几乎就在那里，但是每3位数就会打破这个值，而不是3，然后是2，就像社会安全号码需要的000-00-0000一样。

我做了一些编辑并修改它按预期工作。希望这会有所帮助。

    <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>

Answer 2

<input id="ssn"/>

<script type="text/javascript">
    $('#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;
    });
</script>

Answer 3

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

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

Answer 4

我修改了丹尼斯＆＃39;脚本有点删除jquery元素。不知道为什么添加前两个if子句，所以我从这个函数中删除了它们。此函数是使用underscore.js的Titanium SDK的侦听器。但您应该能够修改它以与其他JS API一起使用。

$.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;

    }
});

Answer 5

$('#ssn').keyup(function() {
    var val = this.value.replace(/\D/g, '');
    var newVal = '';
    var sizes = [3, 2, 4];

    for (var i in sizes) {
      if (val.length > sizes[i]) {
        newVal += val.substr(0, sizes[i]) + '-';
        val = val.substr(sizes[i]);
      }
      else
        break;        
    }

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

Answer 6

@Rost的答案是一个不错的开始，但存在三个缺陷。在这个答案中，我修复了其中两个。缺陷：

当您尝试删除'-'时，它会立即重新出现。那是固定的。
当用户键入错误的内容时，错误的文本会出现一秒钟，然后消失。这也是固定的。
以任何方式更改文本时，光标将移动到文本的末尾。仍然是一个问题。

https://stackoverflow.com/a/3288215/3791179是我发现试图解决最后一个问题的最佳建议。但是，这在这里不起作用，因为我们正在更改值中的字符数。我还没有计算出正确的数学方法。如果可以，我将编辑此答案。

copy

我认为所有浏览器的所有版本均不支持<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>事件。您可以改用input事件，但找不到有关支持多少浏览器的信息。如果这样做，问题2将再次出现，但这可能没问题。一些用户可能会发现查看自己在做错事情很有帮助。

Answer 7

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

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

function formatSSN(ssn) {
  // remove all non-dash and non-numerals
  var val = ssn.replace(/[^\d-]/g, '');

  // add the first dash if number from the second group appear
  val = val.replace(/^(\d{3})-?(\d{1,2})/, '$1-$2');

  // add the second dash if numbers from the third group appear
  val = val.replace(/^(\d{3})-?(\d{2})-?(\d{1,4})/, '$1-$2-$3');

  // remove misplaced dashes
  val = val.split('').filter((val, idx) => {
    return val !== '-' || idx === 3 || idx === 6;
  }).join('');

  // enforce max length
  return val.substring(0, 11);
}

// bind our function
document.getElementById("ssn").onkeyup = function(e) {
  this.value = formatSSN(this.value);
}

输入数字时自动形成SSN

7 个答案: