关注AngularJs中html表单内的第一个空输入

Focus first empty input inside html form in AngularJs

本文关键字：第一个 输入 表单 AngularJs html 关注      更新时间：2023-11-18

我正试图使用angularjs指令将第一个空输入集中在html表单中。以下是我迄今为止编写的指令代码（并应用于表单元素）：

.directive('focusFirstEmptyInput', ['$timeout', function ($timeout) {
        return {
            restrict: "A",
            link: function (scope, element, attrs) {
                var focustElement = function () {
                    var keepGoing = true;
                    angular.forEach(element[0], function (field) {
                        if (!keepGoing) {
                            return;
                        }
                        if (field.tagName.toLowerCase() !== 'input')
                            return;
                        debugger;
                        var fieldValue = field.value;
                        if (!fieldValue) {
                            field.focus();
                            keepGoing = false;
                        }
                    });
                };
                $timeout(focustElement, 0);
            }
        };
    }]);

我正在遍历所有表单元素，并试图将焦点集中在第一个空字段上。然而，当我调用focus（）时，元素并没有被聚焦。原因是什么？

更新：

奇怪，但如果我删除调试器语句（或者根本不打开检查器模式）并且不暂停javascript代码，它将首先关注空元素。。。。（我使用的是谷歌浏览器）

Plunker：http://plnkr.co/edit/YT0DoTjUVrrnVwmyrX0v?p=preview

您的超时位置不对。您可以使用jquery来执行一些提升操作。我不知道如何过滤空输入，所以使用了for循环（有人请改进一下）。

将此指令添加到模块中，然后在要设置焦点的父元素上添加属性"焦点优先"。

.directive('focusFirst', ['$timeout', function ($timeout) {            
        return {                
            restrict: "A",
            link: function (scope, element, attrs) {                    
                $timeout(function() {
                    var inputs = element.find('input'),
                        count = inputs.length;
                    for (var i = 0; i < count; i++) {
                        if (inputs[i].value) {
                            continue;
                        }
                        inputs[i].focus();
                        break;
                    }
                }, 0);
            }
        };
    }]);

我做了一个测试，似乎是$timeout中的0值。把它改成300或类似的数字。有了300个工作，你就可以打开或不打开开发工具。

适用于我。

相关文章：