關注Aurelia中的元素

我想將焦點設置爲表單元素。有了jQuery，這非常簡單，只需$('selector').focus。關注Aurelia中的元素

我創建了一個簡單<input ref="xxx" id="xxx" type="text"> ，在我的.ts文件，我想補充一個屬性，在這裏使用它：

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

什麼也沒有發生。開始覺得一些簡單的事情變得越來越困難，我相信這絕對不是重點。

（原用例是將焦點設置到一個引導崩潰裏面的表單元素，當崩潰顯示，像這樣：

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

，對於我的基本的HTML工作（不是單頁的應用程序），但不與Aurelia路上，有什麼奧裏利亞方式？

更新使用從下面米羅斯拉夫·波波維奇答案，並在評論中，我得到了它，像這樣的工作（記住，這是一個引導程序崩潰組件）：

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

來源

2016-03-15 specimen

this.xxx.focus()不工作，因爲DOM元素上沒有focus()方法。 jQuery補充說。 Aurelia創建的參考指向一個純DOM元素。爲了使它的工作，你就需要導入jQuery和包裝元素：

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屬性的值。

來源

2016-03-15 10:27:57

你會怎麼聽崩潰事件？導入$並使用$（'＃collapsedAddTask'）。on（'shown.bs.collapse'，function（）{....}）'或者是否有Aurelia方式？ – specimen

使用jQuery是一種選擇。我不認爲你可以在視圖中綁定一個觸發器到這個事件（'

），因爲它不是一個常規的DOM事件...通常，你會想要封裝所有的DOM相關的邏輯，無論是使用jQuery或純DOM ，自定義元素或自定義屬性。即在這種情況下，您可以使用自定義元素，並使用''。 http://aurelia.io/docs#/aurelia/framework/1.0.0-beta.1.1.4/doc/article/cheat-sheet/9 –

另一種想法...你可以創建'focus-child'自定義屬性這將處理這個'shown.bs.collapse'事件並將焦點設置爲第一個輸入元素或具有給定ID值的元素。有了這個，你可以添加該屬性摺疊div - '

'。更多關於文檔中的自定義屬性 - http://aurelia.io/docs#/aurelia/framework/1.0.0-beta.1.1.4/doc/article/cheat-sheet/8 –

對於其中的元素沒有被隱藏，並且你希望它具有焦點，一旦認爲已經裝載完畢，你可以簡單地添加focus.one-time="true"像這樣的情況：

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

來源

2017-06-30 19:05:32 Andrew

關注Aurelia中的元素

回答

相關問題