Вставить код из буфера обмена в несколько полей ввода

Question

Я искал решение Vanilla Javascript для копирования кода вставки в несколько полей ввода.

У меня есть решения для inte rnet, но они основаны на 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">

Я скопировал этот код из электронной почты и прошёл код в любом поле ввода, он вставит полный код один за другим в каждое поле. Затем получите этот код для проверки с предварительно сохраненным кодом. Вставить, а затем собрать и проверить код в vanilla JavaScript - это то, что я ищу.

Answer 1

Вот один из способов сделать это, его можно легко изменить, чтобы он работал с указанными c текстовыми вводами, но, как есть, это гарантирует, что каждый ввод текста на странице получает одинаковые данные из буфера обмена.

Примечание: querySelectorAll возвращает nodelist вместо массива, вы можете использовать [].forEach.call, чтобы использовать метод массива forEach в nodelist.

// 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">