javascript - 用户完成第一个输入文本的输入后，如何设置并聚焦最后一个输入文本

Question

我在表格中有多个输入文本。从第一个输入文本框中输入值后，如何自动设置值并聚焦最后一个输入文本？

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

我的js代码:

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

您可以处理blur事件或keypress事件(以处理用户按下Enter)或两者的组合:

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>