如何通过按Enter键将焦点设置在a中的下一个“启用”输入框上
[英]How to set focus on next “enable” input box in a by pressing enter button
问题描述
I have a form which has many input fields, some of them are disabled some are enabled. 
我有一个包含许多输入字段的表单，其中一些已禁用，一些已启用。 When I press enter, I want focus to move to the next "enabled" input box only. 当我按Enter键时，我只想将焦点移到下一个“启用”的输入框。 It is not pre-decided that box will be enabled or disabled, it depends on previous forms input. 尚未确定将启用还是禁用此框，这取决于先前的表单输入。 I am using the following code, but the problem is if some disabled box comes, cursor gets stuck. 我正在使用以下代码，但是问题是如果出现一些禁用的框，光标会卡住。 Cursor should go to next Enable input box, in end it should go to submit button. 光标应转到下一个“启用”输入框，最后应转到“提交”按钮。 Code is needed in only AngularJS, CSS or Javascript, not in jQuery (application does't support jQuery). 只有AngularJS，CSS或Javascript才需要代码，而jQuery则不需要（应用程序不支持jQuery）。 Thanks In advance 提前致谢
<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 个解决方案
解决方案1
0 2019-04-02 15:02:03
Instead of using querySelectorAll, you could get you form elements and iterate through the ones coming after the active element until you find the next one that is not disabled like so : 代替使用querySelectorAll，您可以获取表单元素并遍历active元素之后的元素，直到找到下一个未被禁用的元素，如下所示：
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();
解决方案2
-1 2019-04-02 14:46:34
Your JS code is working with the HTML attribute tabIndex but there's no HTML tag on your code containing this attribute. 您的JS代码正在使用HTML属性tabIndex但您的代码中没有包含该属性的HTML标签。
You can add the attribute and value for your sequence like in the following code. 您可以像下面的代码一样为序列添加属性和值。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.