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);
}
8条答案
按热度按时间uqdfh47h1#
来自@kottenator的脚本几乎就在那里了,但是它每隔3位数就打破一次值,而不是3,然后是2,就像社会安全号码所需的000-00-0000一样。
我做了一点编辑和修改它的工作,如预期的。希望这能帮上忙。
wlzqhblo2#
ghhaqwfi3#
@Dennis的答案是这里最好的,但是它使用了jQuery来做选择器,而OP在这篇文章中没有jQuery标签,只有JavaScript。下面是解决方案的VanillaJS版本(或者至少有一种方法可以做到这一点:)
to94eoyn4#
@Rost的回答是一个很好的开始,但有三个缺陷。在这个答案中,我已经修复了其中的两个。缺陷:
1.当您尝试删除“-”时,它会立即重新出现。那是固定的。
1.当用户输入错误时,错误的文本会在那里停留一秒钟,然后消失。这也是固定的。
1.以任何方式更改文本时,光标将移动到文本的末尾。这还是个问题
https://stackoverflow.com/a/3288215/3791179是我发现的解决最后一个问题的最佳建议。但在这里它不起作用,因为我们改变了值中的字符数。我还没有计算出让它正常工作的数学方法。如果我这样做,我会编辑这个答案。
我不认为所有版本的浏览器都支持
input
事件。你可以使用keyup
事件,但是我找不到多少浏览器支持它的信息。如果你这样做,问题#2会回来,但这可能是好的。一些用户可能会发现它有助于看到他们做错了什么。dy1byipe5#
@knod在这里有最好的答案,但他们的解决方案有一个缺点,人们不能输入自己的破折号。
我修改了他们的答案,允许用户(可选)输入或删除自己的破折号,避免阻止有效输入(并添加了一些注解来解释每个步骤)。
mutmk8jj6#
我修改了Dennis的脚本,删除了一些jquery元素。不知道为什么要添加前两个if子句,所以我将它们从这个函数中删除。此函数是使用underscore.js的Titanium SDK的侦听器。但是你应该能够修改它以与其他JS API一起工作。
xiozqbni7#
6bc51xsx8#
试试这个: