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

Question

I was looking for Vanilla Javascript solution, of copy paste code into multiple input fields.

i have got solutions on internet but are jQuery based. This was jQuery Solution

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

I had copy this code from email, and past code on any input field, it will paste complete code one by one in each field. Then get this code verify with pre-saved code. Pasting and then collecting and verify code in vanilla JavaScript is what i am looking for.

Answer 1

Here's one way to do it, it can easily be modified to work on specific text inputs, but as-is this ensures every text input on the page gets the same data from the clipboard.

Side note: querySelectorAll returns a nodelist instead of an array, you can use [].forEach.call to use an Array's forEach method in a 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">