5

テキストフィールドまたはテキストエリアにフォーカスを設定する簡単な方法を探しています。Jquery 構文と Ember 構文を混在させたくない...そして、フォーカスを設定したいテキストフィールドまたはテキストエリアごとに個別のビューを作成したくない。

助言がありますか ？

私の textArea フィールドは単純です:

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

ありがとうマーク

4

5 に答える 5

6

新しい Ember CLIautofocus="autofocus"では、テンプレート *.hbs を使用するだけでこれを取得できます

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

にフォーカスを設定する最も簡単な方法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をラップするを作成し、フックを使用して内部にフォーカスすることができます。inputdidInsertElementinput

テンプレートでは:

// 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 に答える