在多个输入字段上粘贴多个数字

Question

我在我的网站上使用了6个输入字段。网站访问者只需在这6个框中输入6位数的代码。问题在于他们会得到6位数的代码，只需将它们粘贴到第一个输入字段中，剩下的5位数就可以将它们简单地复制到我们发送给这些输入字段的6位代码中进入其余的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来完成。

Answer 1

编辑

我不喜欢我在paste事件中使用的定时器解决方案以及仅使用input或paste事件的复杂性。

看了这段时间之后，我添加了一个解决方案，它使用了2之间的混合。 代码似乎完成了现在所需的全部功能。

脚本：

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

Answer 2

这应该不是太困难......按要求添加的处理程序贴事件第一输入，然后处理。

编辑

其实这比我想象的要棘手，因为它似乎没有办法让粘贴什么文本。您可能需要使用类似这样的工具（半工作）...（请参阅JSFiddle）。

$(document).on("input", "input[name^=chars]", function(e) { 
    // get the text entered 
    var text = $(this).val(); 

    // if 6 characters were entered, place one in each of the input textboxes 
    if (text.length == 6) { 
     for (i=1 ; i<=text.length ; i++) { 
      $("input[name^=chars]").eq(i-1).val(text[i-1]); 
     }  
    } 
    // otherwise, make sure a maximum of 1 character can be entered 
    else if (text.length > 1) { 
     $(this).val(text[0]); 
    } 
}); 

Answer 3

你将不得不纠正一些自定义代码。您可能需要删除maxlength属性，并使用JavaScript来强制每个输入一个数字的限制。

由于dbasemane建议，您可以侦听粘贴事件。您也可以监听键控事件，以便用户输入数字而不必切换到下一个输入。

这里是一个可能的解决方案：

function handleCharacter(event) { 
    var $input = $(this), 
     index = getIndex($input), 
     digit = $input.val().slice(0,1), 
     rest = $input.val().slice(1), 
     $next; 

    if (rest.length > 0) { 
     $input.val(digit); // trim input value to just one character 
     $next = $('.def-txt-input[name="chars['+ (index + 1) +']"]'); 

     if ($next.length > 0) { 
      $next.val(rest); // push the rest of the value into the next input 
      $next.focus(); 
      handleCharacter.call($next, event); // run the same code on the next input 
     } 
    } 
} 

function handleBackspace(event) { 
    var $input = $(this), 
     index = getIndex($input), 
     $prev; 

    // if the user pressed backspace and the input is empty 
    if (event.which === 8 && !$(this).val()) { 
     $prev = $('.def-txt-input[name="chars['+ (index - 1) +']"]'); 
     $prev.focus(); 
    } 
} 

function getIndex($input) { 
    return parseInt($input.attr('name').split(/[\[\]]/)[1], 10); 
} 

$('.def-txt-input') 
    .on('keyup paste', handleCharacter) 
    .on('keydown', handleBackspace); 

我有这样的代码设立的jsfiddle，所以你可以看看它是如何运行的：http://jsfiddle.net/hallettj/Kcyna/

Answer 4

这里是一个jQuery插件，做同样的事情，原来答案只是广义的例子。

我费了九牛二虎之力修改原来的答案（http://jsfiddle.net/D7jVR/）的jQuery插件的源代码是在这里：https://github.com/relipse/jquery-pastehopacross/blob/master/jquery.pastehopacross.js

的这对的jsfiddle的一个例子是在这里： http://jsfiddle.net/D7jVR/111/

源截至2013年4月4日的情况如下：

/** 
* PasteHopAcross jquery plugin 
* Paste across multiple inputs plugin, 
* inspired by http://jsfiddle.net/D7jVR/ 
*/ 
(function ($) { 
    jQuery.fn.pastehopacross = function(opts){ 
     if (!opts){ opts = {} } 
     if (!opts.regexRemove){ 
      opts.regexRemove = false; 
     } 
     if (!opts.inputs){ 
      opts.inputs = []; 
     } 
     if (opts.inputs.length == 0){ 
      //return 
      return $(this); 
     } 

     if (!opts.first_maxlength){ 
      opts.first_maxlength = $(this).attr('maxlength'); 
      if (!opts.first_maxlength){ 
       return $(this); 
      } 
     } 

     $(this).on('paste', function(){ 

      //remove maxlength attribute 
      $(this).removeAttr('maxlength'); 
      $(this).one("input.fromPaste", function(){ 
       var $firstBox = $(this); 

       var pastedValue = $(this).val(); 
       if (opts.regexRemove){ 
        pastedValue = pastedValue.replace(opts.regexRemove, ""); 
       } 

       var str_pv = pastedValue; 
       $(opts.inputs).each(function(){ 
        var pv = str_pv.split(''); 
        var maxlength; 
        if ($firstBox.get(0) == this){ 
         maxlength = opts.first_maxlength; 
        }else{ 
         maxlength = $(this).attr('maxlength'); 
        } 
        if (maxlength == undefined){ 
         //paste them all! 
         maxlength = pv.length; 
        } 
        //clear the value 
        $(this).val(''); 
        var nwval = '';   
        for (var i = 0; i < maxlength; ++i){ 
         if (typeof(pv[i]) != 'undefined'){ 
          nwval += pv[i]; 
         } 
        } 
        $(this).val(nwval); 
        //remove everything from earlier 
        str_pv = str_pv.substring(maxlength); 
       }); 

       //restore maxlength attribute 
       $(this).attr('maxlength', opts.first_maxlength); 
      });  

     }); 

     return $(this); 
    } 
})(jQuery);