javascript 输入号码时自动格式化 SSN
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7685175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autoformat SSN while entering the number
提问by John Cooper
I have a textfield and the user enters the SSN number. While entering itself it should format. Like On the change of the textField... it should format 999-999-999in this way on the display itself.
我有一个文本字段，用户输入 SSN 号码。在输入本身时，它应该格式化。就像关于 textField 的变化......它应该999-999-999在显示器本身上以这种方式格式化。
采纳答案by Rost
<input id="ssn"/>
<script type="text/javascript">
$('#ssn').keyup(function() {
var val = this.value.replace(/\D/g, '');
val = val.replace(/^(\d{3})/, '-');
val = val.replace(/-(\d{2})/, '--');
val = val.replace(/(\d)-(\d{4}).*/, '-');
this.value = val;
});
</script>
回答by Dennis O'Neil
The script from @kottenator was almost there, but it breaks the value every 3 digits, instead of 3, then 2, like the 000-00-0000 needed for Social Security numbers.
来自@kottenator 的脚本几乎就在那里，但它每 3 位打破该值，而不是 3，然后是 2，就像社会安全号码所需的 000-00-0000。
I did a little editing and modified it to work as intended. Hope this helps.
我做了一些编辑并修改它以按预期工作。希望这可以帮助。
<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>
回答by Kris Boyd
@Dennis's answer was the best here, however it used JQuery to do the selector and the OP did not have a JQuery tag on this post, just JavaScript. Here is the VanillaJS version of the solution (or at least one way to do it :)
@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;
};
回答by Mike S.
I modified Dennis' script a bit removing the jquery elements. Not sure why the first two if clauses were added, so I removed them from this function. This function is a listener for the Titanium SDK using underscore.js. But you should be able to modify it to work with other JS API's.
我修改了丹尼斯的脚本，删除了 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;
}
});
回答by sinase
$('#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;
});
回答by knod
@Rost's answer is a great start, but had three flaws. In this answer I've fixed two of them. Flaws:
@Rost 的回答是一个很好的开始，但有三个缺陷。在这个答案中，我修复了其中两个。缺陷：
- When you try to delete a '-' it immediately reappeared. That's fixed.
- When the user types something wrong, the wrong text was there for a second before going away. That's also fixed.
- When you change the text in any way, the cursor moves to the end of the text. That's still a problem.
- 当您尝试删除“-”时，它会立即重新出现。那是固定的。
- 当用户输入错误时，错误的文本会在消失之前存在一秒钟。那也是固定的。
- 当您以任何方式更改文本时，光标将移动到文本的末尾。那仍然是一个问题。
https://stackoverflow.com/a/3288215/3791179is the best suggestion I've found to try to fix that last problem. It doesn't work here, though, because we're changing how many characters are in the value. I haven't worked out the math to make it work properly yet. If I do, I'll edit this answer.
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})/, '-');
val = val.replace(/^(\d{3})-(\d{2})(.+)/, '--');
this.value = val.substring(0, 11);
});
</script>
I don't think the inputevent is supported in all versions of all browsers. You can use the keyupevent instead, but I can't find info on how many browsers support that. If you do, problem #2 will come back, but that might be fine. Some users might find it helpful to see what they're doing wrong.
我认为并非input所有浏览器的所有版本都支持该事件。您可以改用该keyup事件，但我找不到有关有多少浏览器支持该事件的信息。如果这样做，问题 2 会再次出现，但那可能没问题。一些用户可能会发现查看他们做错了什么很有帮助。
