将剪贴板中的代码粘贴到多个输入字段中

Question

我一直在寻找 Vanilla Javascript 解决方案，将代码复制粘贴到多个输入字段中。我在互联网上找到了解决方案，但都是基于 jQuery 的。 这是 jQuery 解决方案<input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1">我从电子邮件中复制了此代码，并将代码粘贴到任何输入字段中，它将在每个字段中一一粘贴完整的代码。然后使用预先保存的代码验证此代码。我正在寻找在普通 JavaScript中粘贴然后收集和验证代码。

Answer 1

这是一种方法，可以轻松修改它以处理特定的文本输入，但这可以确保页面上的每个文本输入从剪贴板获取相同的数据。

旁注：querySelectorAll返回 anodelist而不是数组，您可以在 a 中[].forEach.call使用数组的方法。forEachnodelist

// Listen to paste on the document

document.addEventListener("paste", function(e) {

  // if the target is a text input

  if (e.target.type === "text") {

   var data = e.clipboardData.getData('Text');

   // split clipboard text into single characters

   data = data.split('');

   // find all other text inputs

   [].forEach.call(document.querySelectorAll("input[type=text]"), (node, index) => {

      // And set input value to the relative character

      node.value = data[index];

    });

  }

});

<input type="text" maxlength="1">

<input type="text" maxlength="1">

<input type="text" maxlength="1">

<input type="text" maxlength="1">

<input type="text" maxlength="1">

<input type="text" maxlength="1">