如何粘贴到多个输入?

J. *_*Doe 5 html javascript

有六个条目的输入。如果所需的数字直接粘贴到输入中。

123456
Run Code Online (Sandbox Code Playgroud)

将数字粘贴到第一个框中后,如何将其分配到其他框中?

JSfiddle上

123456
Run Code Online (Sandbox Code Playgroud)
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();
  }
 }
});
Run Code Online (Sandbox Code Playgroud)
.passInput {text-align: center;}
Run Code Online (Sandbox Code Playgroud)

谢谢Roko C. Buljan,他帮助开发了代码


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

Rok*_*jan 5

要获取clipboardData文本ev.originalEvent.clipboardData.getData('text'),请
确保修剪后的长度正好是 6 个字符,并且都是数字。
通过拆分字符串为每个输入分配新值,并聚焦最后一个输入:

const $inp = $(".passInput");

$inp.on({
  paste(ev) { // Handle Pasting
  
    const clip = ev.originalEvent.clipboardData.getData('text').trim();
    // Allow numbers only
    if (!/\d{6}/.test(clip)) return ev.preventDefault(); // Invalid. Exit here
    // Split string to Array or characters
    const s = [...clip];
    // Populate inputs. Focus last input.
    $inp.val(i => s[i]).eq(5).focus(); 
  },
  input(ev) { // Handle typing
    
    const i = $inp.index(this);
    if (this.value) $inp.eq(i + 1).focus();
  },
  keydown(ev) { // Handle Deleting
    
    const i = $inp.index(this);
    if (!this.value && ev.key === "Backspace" && i) $inp.eq(i - 1).focus();
  }
});
Run Code Online (Sandbox Code Playgroud)
.passInput {
  text-align: center;
  width: 20px;
}
Run Code Online (Sandbox Code Playgroud)
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" autocomplete="off" required pattern="\d{1}" autofocus>
  <input type="text" class="passInput" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxlength="1" autocomplete="off" required 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>
Run Code Online (Sandbox Code Playgroud)