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

zlhcx6iw 于 2022-11-05 发布在其他

关注(0)|答案(4)|浏览(199)

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

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

ember.js

来源：https://stackoverflow.com/questions/43020350/set-focus-on-a-text-box-in-ember-js

4条答案

按热度按时间

hlswsv351#

您可以在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）。

赞(0）回复(0）举报 2022-11-05

lfapxunr2#

为了扩展kumkanillam的答案，如果它正在呈现一个文本框，你可以在呈现生命周期结束时设置焦点。因为你在你的组件中只有一个文本输入，你可以用一个选择器找到它。在这里不必担心使用jQuery，这就是它的作用，所以这是Ember的方式。

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

赞(0）回复(0）举报 2022-11-05

eqfvzcg83#

你可以提供id给输入助手、

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

您可以使它成为每次呈现文本字段焦点，

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

赞(0）回复(0）举报 2022-11-05

qyyhg6bp4#

components/以输入文本为焦点/component.js：
第一个

赞(0）回复(0）举报 2022-11-05

我来回答

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

4条答案

相关问题

热门标签

最新问答