将一个元素集中在Aurelia

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">