我有一个表单,其中包含许多输入字段,其中一些被禁用,有些已启用。当我按回车键时,我希望焦点仅移动到下一个"启用"输入框。它不是预先决定启用或禁用框,这取决于以前的表单输入。 我正在使用以下代码,但问题是如果出现一些禁用的框,光标就会卡住。光标应转到下一个启用输入框,最后应转到提交按钮。代码只需要在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>
而不是使用 querySelectorAll,您可以让你形成元素并遍历活动元素后面的元素,直到找到下一个未被禁用的元素,如下所示:
let form_elements = document.forms[0].elements;
let activeElementName = document.activeElement.name;
let activeElementIndex = Array.prototype.slice.call(form_elements ).indexOf(activeElementName);
let nextElementToFocus;
for (i = activeElementIndex + 1; i < form_elements.length-1; i++) {
if (!form_elements[i].disabled) {
nextElementToFocus = form_elements[i];
break;
}
}
nextElementToFocus.focus();
您的 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>