在多个输入字段上粘贴多个数字 [英] Pasting multiple numbers over multiple input fields

问题描述

我的网站上有一个使用6个输入字段的表单。网站访问者只需在这6个框中输入一个6位数的代码。问题是他们将得到6位数的代码，并且理想的是允许他们简单地将我们发送到他们的6位数代码复制到这些输入字段中，只需将粘贴放入第一个输入字段并使剩下的5位数字去进入剩下的5个输入字段。它只是比每个输入字段手动输入每个数字要容易得多。

I've got a form on my site using 6 input fields. The site visitor simply enters a 6 digit code into these 6 boxes. The thing is that they'll get the 6 digit code and it would be ideal to allow them to simply copy the 6 digit code we send them into these input fields by simply putting pasting into the first input field and having the remaining 5 digits go into the remaining 5 input fields. It would just make it much easier than having to manually enter each digit into each input field.

这是我们目前使用的代码，但它可以很容易地改为完成上述描述：

Here's the code we're currently using, but it can easily be changed to accomplish what is described above:

<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]">

我在这里看到类似的帖子：粘贴多个文本字段的序列号

I saw a posting similar to this here: Pasting of serialnumber over multiple textfields

但它没有解决方案我正在寻找。理想情况下，这可以使用jQuery或纯JavaScript来实现。

But it doesn't have the solution I'm looking for. Ideally this could be pulled off using jQuery or plain JavaScript.

推荐答案

编辑

我不喜欢我在粘贴事件中使用的计时器解决方案以及仅使用的复杂性输入或粘贴事件。

I didn't like the timer solution I used in the paste event and the complexity of just using the input or paste event.

看了一会儿之后我添加了一个解决方案使用2.
之间的混合代码似乎现在只需要执行所有操作。

After looking at this for a while I added a solution which uses a hybrid between the 2. The code seems to do all that is required now.

脚本：

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

这篇关于在多个输入字段上粘贴多个数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！