angular 组件中的选项卡按钮不会触发 focusout 事件
focusout event does not trigger with tab button in angular component
在 angular 组件中,当特定 div 聚焦时,我想用 select 元素替换 div 元素,一旦元素聚焦 div 元素替换为 select 元素。此代码在用户 select 通过鼠标选择项目时有效,但在使用 Tab 键时 focusout 事件不会触发。
在聚焦方法上我尝试聚焦 select 元素,但我不知道为什么在按下 tab 按钮后没有触发 focusout。
onFocus(item){
item.isActive = true;
document.getElemntById(item.id).focus();
}
<div *ngFor="let item of array"
<div class="cell">
<select [attr.id]="item.id"
[hidden]="!item.isActive"
(focusout)="item.isActive = false"
>
</select>
<div
tabindex="0"
[hidden]="!item.isActive"
(focus)="onFocus(item)"
>
</div>
</div>
</div>
我将 onFocus 方法更改为:
onFocus(item){
item.isActive = true;
setTimeout(function () {
document.getElemntById(item.id).focus();
}, 0);
}
现在可以了,但我认为这不是一个整洁的解决方案。
在 angular 组件中,当特定 div 聚焦时,我想用 select 元素替换 div 元素,一旦元素聚焦 div 元素替换为 select 元素。此代码在用户 select 通过鼠标选择项目时有效,但在使用 Tab 键时 focusout 事件不会触发。
在聚焦方法上我尝试聚焦 select 元素,但我不知道为什么在按下 tab 按钮后没有触发 focusout。
onFocus(item){
item.isActive = true;
document.getElemntById(item.id).focus();
}
<div *ngFor="let item of array"
<div class="cell">
<select [attr.id]="item.id"
[hidden]="!item.isActive"
(focusout)="item.isActive = false"
>
</select>
<div
tabindex="0"
[hidden]="!item.isActive"
(focus)="onFocus(item)"
>
</div>
</div>
</div>
我将 onFocus 方法更改为:
onFocus(item){
item.isActive = true;
setTimeout(function () {
document.getElemntById(item.id).focus();
}, 0);
}
现在可以了,但我认为这不是一个整洁的解决方案。