CODEWITHSUNDEEP
javascriptjquery
arsarc
arsarc

Reputation: 453

How do I switch from current textbox to next (tabbed) textbox with JS or JQuery

I'm trying to write js code to paste Excel data into many textboxes, and I was able to split the data in my clipboard, but I'm having trouble figuring out how to advance to the next input to paste data.

For simplification, the HTML is similar to this:

<table>
<tr>
    <td>
       <input type="text" id="box1">
    </td>
    <td>
       <input type="text" id="box2">
    </td>
    <td>
        <input type="text" id="box3">
    </td>
</tr>
<table>

My excel data looks like this:

a1  b1  c1

This is what i have so far, and I added a comment on the specific part I think I'm having trouble with. (Code "modified" from here: Intercept Paste data in JavaScript )

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

     console.log(e.target.id);
     var pastedText;
     if (window.clipboardData && window.clipboardData.getData) { // IE
         pastedText = window.clipboardData.getData('Text');
     } else if (e.clipboardData && e.clipboardData.getData) {
        pastedText = e.clipboardData.getData('text/plain');
     }
     e.preventDefault();
     var row = pastedText.split('\n');
     for (var i=0;i<row.length;i++)
     {
         var col = row[i].split('\t');
         for (var j = 0; j<col.length; j++)
         {
             e.target.value = col[j];
             e = e.next(); //Trouble here (?)
         }
     }
    return false;
});

So how this is suppose to work is User copies data from excel, then goes to the form, and in the Input (box1) they click, then ctrl+v (paste) and the three textboxes will be filled. Box1 = a1, Box2 = b1, Box3 = c1

How do I shift the e.target.value to the next tabbable input box with Javascript/JQuery?

Upvotes: 0

Views: 62

Answers (1)

user2033671
user2033671

Reputation:

You'll have to grab a NodeList of all the input elements then you can grab an iterator and advance to your target and continue on from there 

let inputIterator = document.querySelectorAll('input').entries();
let nextInput = inputIterator.next().value[1];
while(!e.target.isEqualNode(nextInput)){
    nextInput = inputIterator.next().value[1];
}
....
       for (var j = 0; j<col.length; j++)
     {
         nextInput.value = col[j];
         nextInput = inputIterator.next().value[1]; 
     }

Upvotes: 1

Related Questions