我在一个表格中有多个输入文本。从第一个输入文本框中键入完值后,如何自动设置值并聚焦最后一个输入文本?
<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>