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代码，它将首先关注空元素....（我正在使用谷歌浏览器）< / p>

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

Answer 1

你在错误的地方有超时。您可以使用jquery来完成一些提升。我不确定如何过滤空输入，所以使用for循环（有人请改进这个）。

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

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

Answer 2

我做了一个测试，似乎是$ timeout中的0值。将其更改为300或类似的东西。有300个工作要么你打开或不打开开发人员工具。

适合我。

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

2 个答案: