在 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。 奧瑞莉亞的方式是什么？

更新使用下面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 並包裝元素：

import $ from 'jquery';

// ...

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

---

無論如何，您應該避免在常規視圖模型中使用 jQuery。 可以將其用於自定義元素和自定義屬性，在這些地方需要與 DOM 交互或初始化一些 jQuery 插件。

Aurelia 中有一個focus自定義屬性。 您可以在這篇 Aurelia 的博客文章中閱讀更多相關信息。

基本上，它使您能夠從視圖模型中控制焦點。 在你看來，你會有這樣的：

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