5

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

有什么建议么 ？

我的 textArea 字段很简单：

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

谢谢马克

4

5 回答 5

6

使用新的 Ember CLI，您只需autofocus="autofocus"在模板 *.hbs 中使用即可

{{input value=text type="text" name="text" placeholder="Enter text" autofocus="autofocus"}}
于 2015-02-24T19:07:24.853 回答
5

将焦点设置在 a 上的最直接方法TextArea如下：

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

并且无论何时您想要这样的视图，您都可以像这样使用它：

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

而且我不想为我想要设置焦点的每个文本字段或文本区域创建单独的视图。

通过创建从您TextArea扩展而来的自定义视图，Ember.TextArea而不是每次创建新视图时，您都在以所需的行为重用自定义视图。

希望能帮助到你。

于 2013-07-31T09:52:39.477 回答
1

这个小包更进一步，直接在模板中更优雅地执行此操作，无需任何进一步的编码或子类化：

<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-04T02:19:08.030 回答
1

您可以创建一个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-07T20:28:47.650 回答
0

在我的情况下，这有助于 https://github.com/ember-a11y/ember-component-focus

组件.coffee

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

模板.标志

if AddCardMode
  something input id=1
于 2018-11-09T16:20:32.373 回答