Question

我想将焦点设置为表单元素。使用jQuery，这很简单，只需$('selector').focus。

我创建了一个简单的<input ref="xxx" id="xxx" type="text"> 在我的.ts文件中，我添加了一个属性并在此处使用：

attached() {
    this.xxx.focus()
}

什么都没发生。开始觉得一些简单的事情变得越来越困难，我确信从来都不是。

（最初的用例是将焦点设置为Bootstrap折叠中的表单元素，当显示崩溃时，如下所示：

// set focus to the first element when the add-cell collapse is shown
$('#collapsedAddTask').on('shown.bs.collapse', function () {
    $('#AddTaskTitle').focus()
})

适用于我的基本HTML（不是单页应用），但不适用于Aurelia。 Aurelia的方式是什么？

更新使用下面的 Miroslav Popovic 的答案，并在评论中，我得到了它的工作（记住，这是一个Bootstrap崩溃组件）：

<!-- the heading with an A that toggles visibility -->
<div class="panel-heading">
    <a href="#collapsedAddTask" data-toggle="collapse" id="addTaskHeader" click.delegate="addTaskShown()">Add task</a>
</div>
<!-- the body, which is initially hidden -->
<div class="panel-body">
    <div class="collapse" id="collapsedAddCell">
       <input type="text" focus.bind="addTaskFocused">
       <!-- more controls ... -->
    </div>
</div>

Answer 1

this.xxx.focus()无效，因为DOM元素上没有focus()方法（编辑：显然现在有，虽然Safari不支持它 - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus，谢谢@classicalConditioning）。 jQuery补充说。 Aurelia创建的参考指向一个普通的DOM元素。要使其工作，您需要导入jQuery和wrap元素：

import $ from 'jquery';

// ...

attached() {
    $(this.xxx).focus();
}

无论如何，你应该避免在常规视图模型中使用jQuery。将它用于自定义元素和自定义属性是可以的，您需要与DOM交互或初始化一些jQuery插件。

Aurelia中有一个focus自定义属性。您可以在this Aurelia's blog post中了解有关它的更多信息。

基本上，它使您可以从视图模型控制焦点。在您看来，您将拥有：

<input type="text" focus.bind="hasFocus" value.bind="..."/>

在视图模型中：

attached() {
    this.hasFocus = true;
}

当然，您可能会将其用于更复杂的场景。即在展开collapse时，或在将新项目添加到与repeat.for绑定的数组时，关注输入。

此外，focus属性实现双向绑定。在上面的示例中，它将相应地更改hasFocus属性的值。

Answer 2

对于元素未被隐藏且您希望在视图加载完成后获得焦点的情况，您只需添加focus.one-time="true"，如下所示：

<input
  type="text"
  class="form-control"
  focus.one-time="true"
  value.bind="email"
  placeholder="email address">

将一个元素集中在Aurelia

2 个答案: