将焦点设置为没有名称或 ID 的控件

Question

我想自动将焦点设置在 Angular 的 ui-grid 过滤器中的输入控件上：

但是，该控件没有名称或 ID。这是 HTML 的样子：

<div class="gridFullThin" ui-grid="gridApps" ui-grid-selection ui-grid-resize-columns></div>

我尝试添加此属性，但没有帮助：

autofocus="autofocus"

在 IE 中，在 F12 工具 DOM Explorer 中，我可以看到输入如下所示：

<input class="ui-grid-filter-input ui-grid-filter-input-0 ng-touched" aria-label="Filter for column" type="text" placeholder="" ng-attr-placeholder="{{colFilter.placeholder || ''}}" ng-model="colFilter.term">

它没有 ID。有什么方法可以自动将焦点放在此处吗？

** 编辑 ** - 这是生成的 HTML，如 F12 所示（输入元素以蓝色突出显示）：

Answer 1

假设您无法编辑标记以添加自己的 ID，您仍然可以通过 class 或将输入指定为具有 ID 的父项的子项来定位。

聊天中讨论的正确答案：

var elements = document.querySelector('.modal .ui-grid-header-cell .ui-grid-filter-input-0'); 
elements.focus();

Answer 2

如果这是 HTML 标记中的第一个输入元素，那么您可以这样做：

document.forms[0].elements[0].focus();

否则，如果您在此输入之前有隐藏元素，则必须遍历表单元素并找到第一个非隐藏元素。