将重点放在一个ember应用程序中 [英] set focus in an ember application

问题描述

我想要将焦点设置为textarea，因为鼠标点击不在该任务区域。

I want to be able to set the focus to a textarea as a result of a mouse click not in that task area.

作为一个最小的例子，让我们说我开始一个文本，如果你点击它，它被替换为一个文本字段。我可以通过一个句柄脚本来实现这一点：

As a minimal example, let's say that I'm starting with a text and if you click on it, it gets replaced with a textfield. I can achieve this by a handlebars script:

<script type="text/x-handlebars">
  {{#if isActive}}
  {{view Ember.TextField}}
  {{else}}
  <p {{action foo}}> Click Here to Enter text  </p>
  {{/if}}
</script>

与

App.ApplicationController = Ember.Controller.extend({
    isActive: false,
    foo: function(){
       this.set("isActive", true);
    }
});

这个工作可以在点击中创建文本框，但不会将重点放在该文本区域第二次点击可以实际输入文字）。

This works to create the textfield on the click, but does not give focus to that text area (it takes a second click to be able to actually enter text).

有没有一个很好的方式来达到这个目的？我可以通过在模板中设置一个ID并使用jquery进行选择来做某事，但这似乎是不合适的。

Is there a good way to achieve this end? I could do something hacky by setting an ID in the template and selecting it with jquery, but that seems inelegant.

推荐答案

考虑扩展Ember.TextField，如下所示：

Consider extending Ember.TextField as follows:

App.FocusedTextField = Em.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

然后更改您的handlebars模板以使用它：

Then change you handlebars template to use it instead:

<script type="text/x-handlebars">
  {{#if isActive}}
    {{view App.FocusedTextField}}
  {{else}}
    <p {{action foo}}> Click Here to Enter text  </p>
  {{/if}}
</script>

这篇关于将重点放在一个ember应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！