如何在将数字输入文本框时自动添加数字之间的空格？
如何在将数字输入文本框时自动添加数字之间的空格？
提问于 2017-06-27 19:32:58
我们有以下格式的密码：
45 674 25 910
我们最初的要求是让用户能够在没有空格的情况下输入密码，
换句话说，如果引脚是没有空格的10位数字，我们愿意接受它作为有效的输入。
同样，如果引脚是13位数字(有三个空格)，我们也愿意接受输入为有效。
如果数字小于10或不带空格，或大于13有空格，我们希望抛出输入无效的错误。
下面的脚本满足了上述要求：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSearch").click(function () {
var result = true;
if ($('#pin').val().replace(/ /g, '').length == 10) {
result = true;
}
else {
result = false;
alert("Invalid");
return false;
}
return result;
});
});
</script>然而，管理部门已经决定改变要求在用户输入密码时自动添加空格的要求。
换句话说，用户可以输入带空格的引号，也可以输入没有空格的引号，但是在输入引号时会自动添加空格。
有什么想法如何修改上面的脚本吗？
更好的是，是否有一个我可以修改以满足我们的要求的例子？
回答 2
Stack Overflow用户
发布于 2017-06-27 19:37:38
注释:此代码将在2、3、2、3 ..etc字符之后添加空格。您可以通过编辑map中的代码来更改字符数。
$("#user-input").on('keyup', function () {
// Helpers
var swap = 4, // Swap between 3 and 4
index = 2; // Spaces indexs 2, 6, 9, 13 .. etc
// This variable contains the same input value with sapces
var niceVal = $(this).val()
.replace("/\s/g", "").split("") // Remove all spaces and convert to array
.map(function (item, i) { // loop throw the array
if (i === 0) {
return item;
}
if (i % index === 0) {
item = item === " "
? item
: " " + item;
index += swap;
swap = swap === 3
? 4
: 3;
}
return item;
}).join(""); // Convert array to string
$(this).val(niceVal); // Update input value
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="user-input">
Stack Overflow用户
发布于 2017-06-28 16:27:30
好吧，有了纯JS，我对这个问题的处理方法如下；
虽然我在评论中提到了keyup事件，但keydown事件似乎更合适，因为由于速度键入，当同时按下多个键时，keyup可能会导致奇怪的行为。我还没有对它进行彻底的测试，所以这只是对你的一个指导。然而，如果你发现了任何问题，我可以看看它。
编辑：，尽管我做了很多努力，但我已经意识到，如果您想要修改输入元素的值，就像在这个问题中一样，您必须设置一个逻辑，以便在和谐的情况下利用keydown和keyup事件。这将极大地简化您的逻辑，并将产生一个非常健壮的代码。
好吧，我们走..。
var pin = document.getElementById("PIN"),
pbt = document.getElementById("PBT");
pin.addEventListener("keydown", function(e){
var val = e.target.value,
len = val.length,
lst = val[len-1],
key = e.key;
e.target.value = key === "Backspace" ? len === 4 ||
len === 8 ||
len === 11 ? val.slice(0,-1)
: val
: len === 2 ||
len === 6 ||
len === 9 ? val + "\xa0"
: val;
});
pin.addEventListener("keyup", function(e){
var val = e.target.value,
pix = val.search(/[^0-9\xa0]/); // problem index
e.target.value = ~pix ? val.slice(0, pix) : val
});
pbt.addEventListener("click", function(e){
pin.value.length === 13 ? console.log(pin.value)
: console.log("Please complete the PIN Code");
});<input id="PIN" value="" placeholder="Enter PIN" maxlength=13 size=13/>
<button id="PBT">Enter PIN</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44788419
复制相关文章
相似问题
腾讯云开发者
