javascript - 用于自动填充多个字段的 jQuery 库

Question

我有多个带有字符限制的文本框，它们共同构成一个代码。由于各种原因，将盒子分开是有价值的。我希望能够在第一个文本框中粘贴完整的代码并让它自动填充所有文本框。对于这种情况，有没有办法在 javascript 或 jquery 库中执行此操作？

目前我在每个文本框上使用 jQuery autotab，我更愿意保留该功能。

Answer 1

你当然可以在 JS 中做到这一点。我不知道有一个图书馆可以为你做这件事。在这里从臀部拍摄，但可能是这样的：

示例 HTML

<input type='text' data-auto-pop='true' data-group='1' data-char-limit='3'/>
<input type='text' data-auto-pop='true' data-group='1' data-char-limit='3'/>
<input type='text' data-auto-pop='true' data-group='1' data-char-limit='4'/>

示例 JS

$("input[data-auto-pop='true']").change(function () {
  var $this = $(this), val = $this.val();
  if ($this.data("char-limit") > val.length) {
    return;
  } else {
    var setVal = function() {
      $this.val(val.slice(0, $this.data("char-limit"));
      val = val.slice($this.data("char-limit"));
    };
    setVal();
    while ($this.closest("input[data-group='"+$this.data("group")+"']") && val.length > 0) {
      $this = $this.closest("input[data-group='"+$this.data("group")+"']");
      setVal();
    }
  }
}

可能有一些错误，但你应该明白。

Answer 2

演示

使用 onpaste 事件从用户的剪贴板中捕获数据。然后获取该数据并生成适合您输入的数组。然后使用 .val() 设置这些值

JS

$(function(){

    // get first input element
    pastable = document.getElementById('pastable');          
    // listen for the user to paste
    pastable.onpaste = function(e){
        // retrieve paste data as an array split to each 3 characters (3 dots below in regex)
        var inputArray = e.clipboardData.getData('text/plain').match(/.../g);
        // loop over input fields
        $('input').each(function(i){
             // place data from paste
             $(this).val(inputArray[i]);                
        });
    };

});​

HTML

<input type='text' id="pastable" maxlength="3"/>
<input type='text' maxlength="3" />
<input type='text' maxlength="3" />​