javascript - 在 AngularJs 中将第一个空输入集中在 html 表单中

Question

我正在尝试使用 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 代码，它将首先关注空元素....(我使用的是 Google Chrome)

笨蛋:http://plnkr.co/edit/YT0DoTjUVrrnVwmyrX0v?p=preview

Answer 1

你在错误的地方超时了。您可以使用 jquery 来做一些提升。我不确定如何过滤空输入，所以使用了 for 循环(请有人改进它)。

将此指令添加到您的模块，然后在您希望它为其设置焦点的父元素上添加属性“focus-first”。

.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);
            }
        };
    }]);