Ember：簡單的方法來設置焦點在一個領域

我正在尋找一種簡單的方法來設置焦點到文本字段或textarea。我更喜歡不將Jquery語法與Ember語法混合在一起......並且我寧願不爲每個我想設置焦點的文本字段或textarea創建獨立的視圖。Ember：簡單的方法來設置焦點在一個領域

有什麼建議嗎？

我textarea的領域很簡單：

{{view Ember.TextArea valueBinding="body" placeholder="body"}}

感謝馬克

來源

2013-07-31 cyclomarc

將焦點設置在TextArea將是以下最簡單的方法：

App.FocusTextArea = Ember.TextArea.extend({ 
    didInsertElement: function() { 
    this._super(...arguments); 
    this.$().focus(); 
    } 
});

而且每當你想要這樣的看法，你可以像這樣使用它：

{{view App.FocusTextArea valueBinding="body" placeholder="body"}}

，我不喜歡創造一個我曾經想將焦點設置爲每個文本框或textarea的獨立意見。

通過創建一個自定義視圖TextArea從Ember.TextArea你是不是每次都創建一個新的視圖擴展，你重新使用與所期望的行爲的自定義視圖。

希望它有幫助。

來源

2013-07-31 09:52:39 intuitivepixel

清晰而簡單的解決方案Thx。 Marc – cyclomarc

2018年更新如何？：） – sheriffderek

這種小包裝進了一步，這是否更微微有點優雅，直接在模板中，沒有任何進一步的編碼或子類：

<body> 
    <!-- all the libraries --> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script> 
    <script src="http://rawgithub.com/AndreasPizsa/ember-autofocus/master/dist/ember-autofocus.min.js"></script> 
    <!-- your template --> 
    <script type="text/x-handlebars"> 
    Hello, world! {{ input }} 
    : 
    : more elements here 
    : 
    {{ autofocus }} {# <<<<< does the magiC#} 
    </script> 
    <!-- your app --> 
    <script> 
    Ember.Application.create(); 
    </script> 
</body>

您可以從https://github.com/AndreasPizsa/ember-autofocus 或bower install ember-autofocus得到它。

來源

2014-01-04 02:19:08 AndreasPizsa

有了新的灰燼CLI你得到這個使用簡單的模板autofocus="autofocus" * .hbs

{{input value=text type="text" name="text" placeholder="Enter text" autofocus="autofocus"}}

來源

2015-02-24 19:07:24

很好，thx。奇怪的是，如果輸入是空的，那麼它不起作用。 – Joe

另一個奇怪的是，如果將輸入插入到dom中，將其移除並在第二次插入時再次插入，則不會自動對焦。 –

這只是將屬性代理到依賴於DOMContentLoaded事件的html元素[input＃autofocus]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus）。這就是爲什麼它只發生在第一次輸入，直到你加載頁面 – Misterparker

您可以創建一個component一個包裝input字段並使用didInsertElement鉤焦點內input：

在模板中：

// template.hbs 
{{#focus-input}} 
    {{input type="text"}} 
{{/focus-input}}

您的組件：

// components/focus-input.js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 
    didInsertElement() { 
    this.$('input').focus(); 
    } 
});

來源

2016-05-07 20:28:47 fguillen

肯定會很高興做一些像'{{input id =「id」最初聚焦}}或其他東西。我想你可以擴展輸入幫手來跳過嵌套。 – sheriffderek

Ember：簡單的方法來設置焦點在一個領域

回答

相關問題