Question

请参阅下面的编辑，了解最相关的新信息。

在angular指令中，我有一个div元素。我正在寻找作为输入的后代并抓住第一个应用焦点的后代。

var nodes = element[0].querySelectorAll('input, button');

我可以通过节点[0]访问我想要的输入，但我无法弄清楚如何对它执行focus（）调用。

nodes[0].focus() does not work
$(nodes[0]).focus() does not work
angular.element(nodes[0]) does not work

当我将节点列表打印到控制台时：

NodeList [ <button.yes.btn.btn-default>, <button.no.btn.btn-default> ]

当我选择节点[0]并打印到控制台时：

<button data-ng-click="showMismatchWarning = false; verifyRentalItemsMatch()" class="yes btn btn-default" type="button" answer="">

例如，那个我想要将focus（）应用于的按钮。我似乎无法弄清楚如何从查询选择器结果转到执行本机html焦点（）

编辑（最相关的信息）：

更多信息。我有不同的标签，因此它们被隐藏了。但该指令应用于相同的布尔表达式isPage（x），因此DOM元素应该在此时间点可见。

<div ng-show="isPage(1)" myFocus="isPage(1)">
  <input> <--- this very first one focus() seems to work
</div>

<div ng-show=isPage(2)" myFocus="isPage(2)">
  <input> <--- this one the focus() never works
</div>

考虑到这一点，必须是在DOM元素完全可见之前运行focus（），这就是focus（）失败的原因。但该指令是关注属性并监视同一个表达式变为真，为什么它会在ng-show之前执行？

这是我的指示供参考。

"use strict";
angular.module('something').directive("myfocus", function() {
    return {
        link: function(scope, element, attributes) {
            scope.$watch(attributes.focuson, function(newValue) {
                if(newValue) {
                    highlightAndFocus(element[0]);
                }
            },true);

            function highlightAndFocus(node) {
                var task = $(node);
                task.focus();
                task.addClass('highlight');

                var nextInput = node.querySelector('input, button:not(#cancel)');
                nextInput.focus();
                console.log(nextInput);

            }
        }
    };
});

Answer 1

在调用focus()时，要关注的元素显然不可见。使用非零超时来延迟聚焦或框架的内置功能（如果存在）以检测元素可见的时刻。

或者，尝试阅读要聚焦的元素的offsetWidth（或offsetHeight）属性，以在设置焦点之前强制页面重排/重绘。

如何从querySelectorAll NodeList中选择DOM元素来应用focus（）？

1 个答案: