How to set focus on next “enable” input box in a by pressing enter button
Question
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. 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). 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 answers
solution1
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 :
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();
solution2
-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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.