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

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

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

我是新来的余烬和我尝试做焦点，而无需使用jQuery的。

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

来源

2017-03-25 Sriram G

您可以输入助手提供身份证，

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

你可以把它注重文本字段，每个渲染，

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

来源

2017-03-25 18:59:27 kumkanillam

这是'this。$（'＃cat-text'）。focus（）;'jQuery function？有没有其他方式没有使用jQuery功能？（是否有任何可用的余烬功能？）。我们推荐使用一个在内部使用jQuery函数？ –

找到根本原因后，我没有解决这个问题。我只是修复它以得到你需要的东西。使用jQuery函数根本不是推荐的之一。顺便说一句，不接受这个答案是可以接受的，因为可能有烬方式来解决这个问题，我不知道。 – kumkanillam

要在kumkanillam的答复扩大，你可以只将焦点设置在如果呈现文本框，则呈现生命周期结束。由于您的组件中只有一个文本输入，因此您可以通过选择器找到它。无需担心在这里使用jQuery，因此它就是Ember方式。

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

来源

2017-03-26 15:09:45

谢谢，亚当。我很担心在ember中使用jQuery。你的评论清楚地表明我们可以使用它。 –

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

回答

相关问题