个人中心
gpt4 book ai didi

javascript - 如何通过按回车按钮将焦点设置在下一个 "enable"输入框上

转载 作者：行者123 更新时间：2023-11-28 15:07:14 25 4
gpt4 key购买 nike

我有一个有很多输入字段的表单，其中一些被禁用，一些被启用。当我按下回车键时，我希望焦点仅移动到下一个“已启用”输入框。启用或禁用框不是预先确定的，它取决于以前的表单输入。 我正在使用以下代码，但问题是如果出现某个禁用的框，光标会卡住。光标应该转到下一个启用输入框，最后它应该转到提交按钮。只有 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();

关于javascript - 如何通过按回车按钮将焦点设置在下一个 "enable"输入框上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55477445/

25 4 0
文章推荐： javascript - Popper js为 Action 菜单添加动画
文章推荐： ios - 如何从 firebase 数据库中以字符串而不是字典的形式检索数据并将其添加到数组中？
文章推荐： javascript - 为什么它返回未定义？
文章推荐： html - 悬停菜单不会打开，悬停
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com