我的网站上有一个使用 6 个输入字段的表单。站点访问者只需在这 6 个框中输入 6 位代码即可。问题是他们将获得 6 位代码,最好让他们简单地将我们发送给他们的 6 位代码复制到这些输入字段中,方法是简单地粘贴到第一个输入字段中,然后让剩余的 5 位数字继续进入其余 5 个输入字段。与必须在每个输入字段中手动输入每个数字相比,这只会简单得多。
这是我们当前使用的代码,但可以轻松更改它以完成上述内容:
<input type="text" maxlength="1" class="def-txt-input" name="chars[1]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[2]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[3]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[4]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[5]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[6]">
我在这里看到了类似的帖子:Pasting of serialnumber over multiple textfields
但它没有我正在寻找的解决方案。理想情况下,这可以使用 jQuery 或纯 JavaScript 来实现。
最佳答案
编辑
我不喜欢我在 paste
事件中使用的计时器解决方案以及仅使用 input
或 paste
事件的复杂性。
看了一会儿之后,我添加了一个解决方案,它使用了两者之间的混合。 该代码似乎可以满足现在的所有要求。
脚本:
var $inputs = $(".def-txt-input");
var intRegex = /^\d+$/;
// Prevents user from manually entering non-digits.
$inputs.on("input.fromManual", function(){
if(!intRegex.test($(this).val())){
$(this).val("");
}
});
// Prevents pasting non-digits and if value is 6 characters long will parse each character into an individual box.
$inputs.on("paste", function() {
var $this = $(this);
var originalValue = $this.val();
$this.val("");
$this.one("input.fromPaste", function(){
$currentInputBox = $(this);
var pastedValue = $currentInputBox.val();
if (pastedValue.length == 6 && intRegex.test(pastedValue)) {
pasteValues(pastedValue);
}
else {
$this.val(originalValue);
}
$inputs.attr("maxlength", 1);
});
$inputs.attr("maxlength", 6);
});
// Parses the individual digits into the individual boxes.
function pasteValues(element) {
var values = element.split("");
$(values).each(function(index) {
var $inputBox = $('.def-txt-input[name="chars[' + (index + 1) + ']"]');
$inputBox.val(values[index])
});
};
参见 DEMO
关于javascript - 在多个输入字段上粘贴多个数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11804064/