在焦點應用程序中設置焦點

Question

我希望能夠將焦點設置為textarea，因為鼠標單擊不在該任務區域中。

作為一個最小的例子，假設我從一個文本開始，如果你點擊它，它將被替換為文本字段。 我可以通過一個把手腳本實現這個目標：

<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);
    }
});

這適用於在單擊時創建文本字段，但不會將焦點放在該文本區域上（只需單擊二次即可實際輸入文本）。

有沒有一個很好的方法來實現這一目標？ 我可以通過在模板中設置ID並使用jquery選擇它來做一些hacky，但這看起來不夠優雅。

Answer 1

此外，減少didInsertElement和this.$().focus(); 可看起來好像你是混合的jQuery到您的灰燼模塊-和我很不喜歡這樣做，你可以使用指定的附加屬性的Ember.JS方式Ember.TextField 。

我們可以指定我們對HTML5 autofocus屬性感興趣：

Ember.TextSupport.reopen({
  attributeBindings: ["autofocus"]
});

然后我們可以將標准Ember.TextField放到我們的頁面上，而不必創建另一個視圖來擴展Ember.TextField ：

{{view Ember.TextField autofocus="autofocus"}}

見JSFiddle： http ： //jsfiddle.net/MdzhN/

Answer 2

考慮如下擴展Ember.TextField：

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

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

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