Question

我正在尝试将文字更改为文本框。如果用户单击该文本，它将更改为测试框，以便他们可以编辑内容。我做到了。我可以通过下面的代码设置焦点。

{{input value=animal.name autofocus=true}}

它只适用于第一次。如果我向外聚焦，文本框将再次更改为文本内容。如果我再次单击该文本，我可以看到文本框，但它不是焦点。以下是我正在尝试的代码。

组件文件：

import Ember from 'ember';

export default Ember.Component.extend({
  isTextBox: false,
  actions: {
    editTest() {
      this.set('isTextBox', true);
    }
  },
  focusOut() {
    this.set('isTextBox', false);
  },
});

模板文件：

{{yield}}
<center><h2>
<div onclick = {{action 'editTest'}}>
{{#if isTextBox}}
{{input value=animal.name autofocus=true}}
{{else}}
{{animal.name}}
{{/if}}
</div>
</h2></center>

我是ember的新手，我试图在不使用jQuery的情况下进行关注。

这是旋律https://ember-twiddle.com/d832c6540ba94901a6c42d5bb3cfa65e?openFiles=templates.components.text-input.hbs%2Ctemplates.components.text-input.hbs。

Answer 1

您可以在Plain Old Javascript中执行此操作，如下所示：

didRender(){
    // This works but is not very ember-ish
    // document.getElementById('cat-text').focus();

    // For a component, you can do this
    this.get('element').querySelector("#cat-text").focus();
}

这假设您有这样的输入：

{{input id='cat-text' value=animal.name }}

Ember 2.13+不再依赖于jQuery（虽然您使用的是一些附加组件），因此您可以消除jQuery将添加到应用程序负载的35kb（min + gzip）

Answer 2

要扩展kumkanillam的答案，您可以在渲染生命周期结束时将焦点设置为渲染文本框。由于组件中只有一个文本输入，因此可以使用选择器找到它。不需要担心在这里使用jQuery，因为它是Ember方式。

didRender(){
  if(this.get('isTextBox')){
    this.$('input[type=text]:first').focus();
  }
}

Answer 3

您可以为输入助手

提供ID

{{input id='cat-text' value=animal.name }}

您可以为每个渲染设置焦点文本字段，

didRender(){    
    this.$('#cat-text').focus();
  }

Answer 4

components / input-text-focused / component.js：

import TextField from '@ember/component/text-field';

export default TextField.extend({
  didInsertElement(...args) {
    this._super(...args);
    const element = this.get('element');
    if (element) element.focus();
  },
});

{{input-text-focused type="text" name="search" value=search}}

将焦点设置在ember js中的文本框中

4 个答案: