用户完成从第一个输入文本的键入后如何设置和聚焦最后一个输入文本

Question

I have multiple input text inside a table. How can I automatically set value & focus the last input text once I'm done typing values from the 1st input text box?

<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>

my js code:

var d =  id('my_table', document); 
for (var x=1; x<d.rows.length; x++) {                    
    d.rows[x].cells[12].firstChild.innerText = x;                   
    d.rows[x].cells[12].firstChild.focus();     
}

Answer 1

You could handle the blur event or the keypress event (to handle that the user pressed Enter ) or a combination of both:

 var inputs = document.querySelectorAll('#table input'); inputs[0].addEventListener('blur', setFocus); inputs[0].addEventListener('keypress', function(e) { if (e.keyCode === 13) setFocus(); }); function setFocus() { inputs[inputs.length - 1].value = '123'; inputs[inputs.length - 1].focus(); } 

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

Answer 2

I am not sure, It the same as your want but its helps you, try this

<script src="http://code.jquery.com/jquery.min.js"></script>
<td> <input type="text" maxlength="4" tabindex="1" /> </td>
<td> <input type="text" maxlength="4" tabindex="3" /> </td>
<td> <input type="text" maxlength="4" tabindex="4"/> </td>
<td> <input type="text" maxlength="4" tabindex="2" /> </td>
<script type="text/javascript">
jQuery("input").on('input',function () {
    if(jQuery(this).val().length == jQuery(this).attr('maxlength')) {
        nextinput = parseInt(jQuery(this).attr('tabindex'))+1;
        // Here you can take current input value and set where you want
        jQuery("input[tabindex="+nextinput+"]").focus();
    }
});
</script>