Question

我有一个包含许多输入字段的表单，其中一些被禁用，一些被启用。当我按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>

Answer 1

代替使用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();

Answer 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>

如何通过按Enter键将焦点设置在a中的下一个“启用”输入框上

2 个答案: