EmberJS Octane 将重点放在元素上
EmberJS Octane set focus on element
我的组件包含多个文本区域和一个用于添加另一个文本区域的按钮。当用户单击该按钮时,将添加一个新的文本区域。我希望焦点移动到这个新的文本区域。
我看到了 this answer,但它是针对旧版本的,我们没有将 jQuery 与 Ember 一起使用。
我目前拥有的:
五-whys.ts
type LocalWhy = {
content: string;
};
export default class FiveWhys extends Component<FiveWhysArgs> {
@tracked
whys: LocalWhy[] = ...
@action
addWhy() {
this.whys.pushObject({ content: "" });
}
}
五-whys.hbs
{{#each this.whys as |why i|}}
<TextQuestion @value={{why.content}} />
{{/each}}
<button {{on "click" (action this.addWhy)}}>Add Why</button>
正文-question.hbs
...
<textarea value="{{ @value }}" />
问题总结
如何在用户点击后将焦点设置到新的文本区域"Add Why"?
这些天我做了类似的东西:
component.hbs:
{{#each this.choices as |item|}}
{{input
type="text"
id=item.id
keyPress=(action this.newElement item)
value=(mut item.value)
}}
{{/each}}
component.js
@action
newElement({ id }) {
let someEmpty = this.choices.some(({ value }) => isBlank(value));
if (!someEmpty)
this.choices = [...this.choices, this.generateOption()];
document.getElementById(id).focus();
}
generateOption(option) {
this.inc ++;
if (!option)
option = this.store.createRecord('option');
return {
option,
id: `${this.elementId}-${this.inc}`,
value: option.description
};
}
在我的例子中,我没有按钮,而且我创建了 ember 数据记录。通过一些修改,我敢打赌你可以做到!
发现我可以在组件重新呈现后使用 Ember.run.schedule
到 运行 代码。
@action
addWhy() {
... // Adding why field
Ember.run.schedule('afterRender', () => {
// When this function has called, the component has already been re-rendered
let fiveWhyInput = document.querySelector(`#five-why-${index}`) as HTMLTextAreaElement
if (fiveWhyInput)
fiveWhyInput.focus();
})
}
我的组件包含多个文本区域和一个用于添加另一个文本区域的按钮。当用户单击该按钮时,将添加一个新的文本区域。我希望焦点移动到这个新的文本区域。
我看到了 this answer,但它是针对旧版本的,我们没有将 jQuery 与 Ember 一起使用。
我目前拥有的:
五-whys.ts
type LocalWhy = {
content: string;
};
export default class FiveWhys extends Component<FiveWhysArgs> {
@tracked
whys: LocalWhy[] = ...
@action
addWhy() {
this.whys.pushObject({ content: "" });
}
}
五-whys.hbs
{{#each this.whys as |why i|}}
<TextQuestion @value={{why.content}} />
{{/each}}
<button {{on "click" (action this.addWhy)}}>Add Why</button>
正文-question.hbs
...
<textarea value="{{ @value }}" />
问题总结
如何在用户点击后将焦点设置到新的文本区域"Add Why"?
这些天我做了类似的东西:
component.hbs:
{{#each this.choices as |item|}}
{{input
type="text"
id=item.id
keyPress=(action this.newElement item)
value=(mut item.value)
}}
{{/each}}
component.js
@action
newElement({ id }) {
let someEmpty = this.choices.some(({ value }) => isBlank(value));
if (!someEmpty)
this.choices = [...this.choices, this.generateOption()];
document.getElementById(id).focus();
}
generateOption(option) {
this.inc ++;
if (!option)
option = this.store.createRecord('option');
return {
option,
id: `${this.elementId}-${this.inc}`,
value: option.description
};
}
在我的例子中,我没有按钮,而且我创建了 ember 数据记录。通过一些修改,我敢打赌你可以做到!
发现我可以在组件重新呈现后使用 Ember.run.schedule
到 运行 代码。
@action
addWhy() {
... // Adding why field
Ember.run.schedule('afterRender', () => {
// When this function has called, the component has already been re-rendered
let fiveWhyInput = document.querySelector(`#five-why-${index}`) as HTMLTextAreaElement
if (fiveWhyInput)
fiveWhyInput.focus();
})
}