Question

有一个包含六个条目的输入。如果需要的数字直接粘贴到输入中。.

当数字粘贴到第一个框中时，如何将其分配到其他框中？

var $inp = $(".passInput");

$inp.on({
 input: function(ev) {
  if(this.value) {
    $inp.eq($inp.index(this) + 1).focus();
  }
 },
 keydown: function(ev) {
  var i = $inp.index(this);
  if(ev.which===8 && !this.value && i) {
    $inp.eq(i - 1).focus();
  }
 }
});

.passInput {text-align: center;}

<form action="" role="form" method="post" id="passForm">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}" autofocus>
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="\d{1}">
  <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

谢谢Roko C. Buljan，他为代码的开发提供了帮助

PS：我已经审查了问题的答案。但是我意识到它没有用。

Answer 1

要获取剪贴板数据文本，请使用ev.originalEvent.clipboardData.getData('text')，
并确保修剪后的长度恰好是6个字符，并且都是数字。
通过分割字符串为每个输入分配新值，并集中最后一个输入：

const $inp = $(".passInput");

$inp.on({
  paste(ev) {
    const pasteStr = ev.originalEvent.clipboardData.getData('text').trim();
    if (!/\d{6}/.test(pasteStr)) return ev.preventDefault(); // pass invalid. Exit here
    const s = pasteStr.split('');
    $inp.val(i => s[i]).eq(5).focus(); 
  },
  input(ev) {
    if (this.value) $inp.eq($inp.index(this) + 1).focus();
  },
  keydown(ev) {
    const i = $inp.index(this);
    if (ev.which === 8 && !this.value && i) $inp.eq(i - 1).focus();
  }
});

.passInput {
  text-align: center;
}

Copy and paste into any field: 456123<br>
Than try with some invalid string: aA123B

<form action="" role="form" method="post" id="passForm">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}" autofocus>
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="\d{1}">
  <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您可以收听paste事件和grab the pasted text。

然后循环遍历每个粘贴的char并更新每个输入字段，如下所示：

$inp.on('paste', function(e) {

    var pastedData = e.originalEvent.clipboardData.getData('text');
    var pastedChars = pastedData.split("");

    var curIndex = $inp.index(this)

    for (var i=0; i < pastedChars.length; i++) {
      var char = pastedChars[i]
      $inp.eq(curIndex + i).val(char).focus();
    }
 }
});

您可以在此处处理一些极端情况，但基本原理应在下面的演示中发挥作用

var $inp = $(".passInput");

$inp.on({
 input: function(ev) {
  if(this.value) {
    $inp.eq($inp.index(this) + 1).focus();
  }
 },
 keydown: function(ev) {
  var i = $inp.index(this);
  if(ev.which===8 && !this.value && i) {
    $inp.eq(i - 1).focus();
  }
 },
 paste: function(e) {

    var pastedData = e.originalEvent.clipboardData.getData('text');
    var pastedChars = pastedData.split("");
    
    var curIndex = $inp.index(this)
    
    for (var i=0; i < pastedChars.length; i++) {
      var char = pastedChars[i]
      $inp.eq(curIndex + i).val(char).focus();
    }
 }
});

.passInput {text-align: center;}

<p>
Copy some text here: 123 123456
</p>
<form action="" role="form" method="post" id="passForm">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}" autofocus>
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="\d{1}">
  <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何粘贴到多个输入？

2 个答案: