关注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中的元素

回答

相关问题