Question

我正在寻找一种将焦点设置为文本字段或文本区域的简单方法。我不喜欢将Jquery语法与Ember语法混合使用...而且我不想为每个我想要设置焦点的textfield或textarea创建单独的视图。

有什么建议吗？

我的textArea字段只是：

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

由于马克

Answer 1

使用新的Ember CLI，您只需使用模板* .hbs

中的autofocus="autofocus"即可

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

Answer 2

将焦点设置为TextArea的最简单方法如下：

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

无论何时你想要这样的观点你都可以这样使用它：

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

我不想为我想要设置焦点的每个textfield或textarea创建单独的视图。

通过创建自TextArea扩展的自定义Ember.TextArea视图，您不会在每次创建新视图时创建该视图，而是重复使用具有所需行为的自定义视图。

希望它有所帮助。

Answer 3

这个小包更进了一步，直接在模板中更优雅地做了一点，没有任何进一步的编码或子类化：

<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。

Answer 4

您可以创建一个包裹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();
  }
});

Answer 5

对我来说这有帮助 https://github.com/ember-a11y/ember-component-focus

component.coffee

import FocusableComponent from 'ember-component-focus/mixins/focusable-component'
export default Ember.Component.extend FocusableComponent,
  actions:
    show: () ->
      @set 'AddCardMode', true
      @focusAfterRender "#1"

template.emblem

if AddCardMode
  something input id=1

Ember：在场中设置焦点的简单方法

5 个答案: