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

kd3sttzy  于 2023-05-05  发布在  Java
关注(0)|答案(8)|浏览(110)

我有一个文本字段,用户输入SSN号。当它进入时,它应该格式化。就像在textField的变化...它应该在显示器本身上以这种方式格式化999-999-999

uqdfh47h

uqdfh47h1#

来自@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>
wlzqhblo

wlzqhblo2#

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

ghhaqwfi3#

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

to94eoyn4#

@Rost的回答是一个很好的开始,但有三个缺陷。在这个答案中,我已经修复了其中的两个。缺陷:
1.当您尝试删除“-”时,它会立即重新出现。那是固定的。
1.当用户输入错误时,错误的文本会在那里停留一秒钟,然后消失。这也是固定的。
1.以任何方式更改文本时,光标将移动到文本的末尾。这还是个问题
https://stackoverflow.com/a/3288215/3791179是我发现的解决最后一个问题的最佳建议。但在这里它不起作用,因为我们改变了值中的字符数。我还没有计算出让它正常工作的数学方法。如果我这样做,我会编辑这个答案。

<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事件。你可以使用keyup事件,但是我找不到多少浏览器支持它的信息。如果你这样做,问题#2会回来,但这可能是好的。一些用户可能会发现它有助于看到他们做错了什么。

dy1byipe

dy1byipe5#

@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);
}
mutmk8jj

mutmk8jj6#

我修改了Dennis的脚本,删除了一些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;

    }
});
xiozqbni

xiozqbni7#

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

6bc51xsx8#

试试这个:

try {
    this.value = this.value.replace(/\D/g, '').match(/(\d{1,3})(\d{1,2})?(\d{1,4})?/).slice(1, 4).filter(el=>!!el).join('-'));
}catch{}

相关问题