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

How to Set & Focus the last input text once user finishes typing from the 1st input text

本文关键字：输入 文本 设置 最后一个 聚焦 用户 第一个      更新时间：2023-09-26

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

<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();     
}

您可以处理 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>

我不确定，它与您想要的相同，但它可以帮助您，请尝试此操作

<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>
相关文章：