我有一个输入框，用户输入社会安全号码（SSN）。在输入时，应自动进行格式化。例如，在textField更改时，应以这种方式
999-999-999 格式化并在显示本身上显示。8个回答
29
@kottenator的脚本几乎达到了要求，但是它每三个数字就断开一次值，而不是像社会保障号码所需的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>
- Dennis O'Neil
2
9
<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>
- Rost
3
6社会安全号码实际上是
000-00-0000 格式的。 - ca9163d9我已经更新了我的解决方案以匹配
NNN-NN-NNNN模式。 - Rost这个已经接近完成了，但是从我尝试过的来看，它有两个问题。首先，每当你在 ssn 中间按下一个键时，光标就会跳到文本的末尾。其次，除非你一直按住“删除”键，否则当你点击破折号上的“删除”时，它会立即重新出现。我已经用下面的解决方案解决了第二个问题，但是我在第一个问题上遇到了难题。 - knod
7
@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;
};
- Kris Boyd
5
@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>
我认为不是所有版本的浏览器都支持input事件。您可以改用keyup事件，但我找不到有关多少浏览器支持它的信息。如果使用键盘事件，则可能会遇到问题＃2，但这可能没有关系。一些用户可能会发现这很有帮助，以便知道他们做错了什么。
- knod
3
@knod 只是好奇，您如何允许用户键入破折号？
因为如果用户键入破折号，它会自动被删除。
<br>
获取子字符串后，我尝试了
formattedValue.length === 3 ? ${formattedValue}- : formattedValue;<br>
但是，这实际上会在退格时引起问题，使得无法删除破折号。 - Nate Thompson1这是一个很好的观点，@NateThompson。尽管需要一些思考，但我会在有机会的时候试一试。就我个人而言，对于那些想要尝试的人，我建议替换第5行中的正则表达式为类似
/[^0-9-]/g的内容，第6行中的正则表达式为类似/^(\d{3})-*(\d{1,2})/的内容，第7行中的正则表达式为/^(\d{3})-(\d{2})-*(\d{1,4})/。请不要引用我的话。老实说，这里有很多可以改进的地方。 - knod我曾经遇到过同样的问题，并发布了一个变体，允许用户输入或删除破折号。 - Karl Keefer
3
@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);
}
- Karl Keefer
1
1谢谢，卡尔。运行得很好。 :) - BEAGLE
1
$('#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;
});
- sinase
1
我对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;
}
});
- Mike S.
1
OP只列出了JavaScript标签。您应该尽量避免在回答中混合其他API，因为他们可能对Titanium SDK和underscore.js一无所知。 - Kris Boyd
0
试试这个：
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{}
- tdjprog
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
\d{3}-\d{3}-\d{3}，但这是问题中要求的方式。由于某种原因，我忘记了 SSN 有多少个字符。感谢 @Dennis O'Neil / @Jason Hansen。 - Rost