arsarc arsarc - 1 year ago 131
jQuery Question

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?

Answer Source

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]; 
     }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download