4

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.

Arslan Ameer
  • 1,010
  • 16
  • 30

1 Answers1

8

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">
JKirchartz
  • 17,612
  • 7
  • 60
  • 88
  • i think my query was not clear or you might misunderstood, but i want to paste code like, first digit in first field, 2nd digit in second and so on. your current code paste complete code in all fields. Regards :) – Arslan Ameer Mar 30 '20 at 23:22
  • @ArslanAmeer - I've updated the code per your comment - it's now splitting the array and putting one character per input. – JKirchartz Mar 31 '20 at 13:19
  • that is exactly what i wanted. – Arslan Ameer Mar 31 '20 at 16:50
  • and for the second part, in which i wanted to get all numbers from input field, make them one code and compare with already save code? or can print on button click. do i have to apply same iteration again like you did? – Arslan Ameer Mar 31 '20 at 16:52
  • 1
    If you've got the data there in that function, you can store it to a hidden input field - or maybe you can try naming the inputs with an array like `` play around and see what you can come up with. – JKirchartz Mar 31 '20 at 18:56
  • yeah that makes sense, using hidden input field and paste complete code there for verification. Thanks A lot :) – Arslan Ameer Mar 31 '20 at 19:18
  • 1
    Any chance to remove undefined for empty fields? – mistersholmes Aug 04 '22 at 23:00
  • 1
    just add data[index] ||= ''; before node.value = data[index]; @mistersholmes – prograk Aug 18 '22 at 13:53