如何从Meteor事件处理程序中聚焦DOM子元素

Question

我有一个事件处理程序,它设置一个会话变量来改变DOM元素中的内容 - 在本例中是一个表格单元格.

'dblclick td.itemName': function (evt) {
  Session.set("editItemName",true);
  evt.currentTarget.children[0].focus();
},


                <td class="itemName">
                {{#unless editItemName}}
                    {{name}} 
                {{else}}
                    <input class="editItemName" type="text" value="{{name}}" style="width:100px;">
                {{/unless}}
                </td>

挺直的......

但是evt.currentTarget.children不起作用.一旦输入发生了文本,我想让它自动聚焦...流星文档说这是一个DOM对象,所以奇怪的是儿童功能不起作用......

谢谢

切特

Answer 1

当您双击,并且您的函数运行时,您editItemName将会话设置为true,然后您尝试给予输入元素焦点,但模板尚未重新渲染,因此input-element没有已创建(模板将在函数返回后的某个时间重新渲染).换句话说:evt.currentTarget.children[0]不是对input-element的引用.

可能的解决方案1

在HTML 5中,有一个名为autofocus的属性,你可以使用它(至少我可以在Chrome中使用).只需将其添加到input-element:

<input autofocus="autofocus" class="editItemName" type="text" value="{{name}}" style="width:100px;">

可能的解决方案2

否则,在渲染模板并且其中存在input-element时,您必须使用JavaScript将其集中:

Template.yourTemplate.rendered = function(){

    var input = this.find('.editItemName')

    if(input){
        input.focus()
    }

}