如何通过按Enter键将焦点设置在a中的下一个“启用”输入框上
我有一个包含许多输入字段的表单，其中一些被禁用，一些被启用。当我按Enter键时，我只想将焦点移到下一个“启用”的输入框。尚未确定将启用还是禁用该框，这取决于先前的表单输入。我正在使用以下代码，但问题是如果出现一些禁用的框，光标会卡住。光标应转到下一个“启用”输入框，最后应转到“提交”按钮。只有AngularJS，CSS或Javascript才需要代码，而jQuery则不需要（应用程序不支持jQuery）。提前致谢
<html>
<head>
<title></title>
<script type='text/javascript'>
var inputs =document.querySelectorAll("input,select");
for (var i = 0 ; i < inputs.length; i++) {
inputs[i].addEventListener("keypress", function(e){
if (e.which == 13) {
e.preventDefault();
var nextInput = document.querySelectorAll('[tabIndex="' + (this.tabIndex + 1) + '"]');
if (nextInput.length === 0) {
nextInput = document.querySelectorAll('[tabIndex="1"]');
}
nextInput[0].focus();
}
})
}
</script>
</head>
<body>
<form action="/action_page.php">
enable text box1 :<input type="text" onEvent="nextField(this);" /><br>
enable text box2 :<input type="text" onEvent="nextField(this);" /><br>
enable text box3 :<input type="text" onEvent="nextField(this);" /><br>
diable text box1 :<input type="text" name="lname" disabled><br>
enable text box3 :<input type="text" onEvent="nextField(this);" /><br>
enable text box3 :<input type="text" onEvent="nextField(this);" /><br>
<input type="submit" value="Submit">
</form>
</form>
</body>
</html>
噜噜哒2回答
-
翻阅古今
您的JS代码正在使用HTML属性，tabIndex但是您的代码中没有包含该属性的HTML标签。您可以像下面的代码一样为序列添加属性和值。var inputs = document.querySelectorAll("input,select");for (var i = 0; i < inputs.length; i++) { inputs[i].addEventListener("keypress", function(e) { if (e.which == 13) { e.preventDefault(); var nextInput = document.querySelectorAll('[tabIndex="' + (this.tabIndex + 1) + '"]'); if (nextInput.length === 0) { nextInput = document.querySelectorAll('[tabIndex="1"]'); } nextInput[0].focus(); } })}<form action="/action_page.php"> enable text box1 :<input type="text" onEvent="nextField(this);" tabIndex="0"/><br> enable text box2 :<input type="text" onEvent="nextField(this);" tabIndex="1"/><br> enable text box3 :<input type="text" onEvent="nextField(this);" tabIndex="2"/><br> diable text box1 :<input type="text" name="lname" disabled><br> enable text box3 :<input type="text" onEvent="nextField(this);" tabIndex="3"/><br> enable text box3 :<input type="text" onEvent="nextField(this);" tabIndex="4"/><br> <input type="submit" value="Submit"></form>
随时随地看视频慕课网APP
相关分类
JavaScript