如何解决Angular 7 如何在使用箭头键通过键盘“拖放”时保持对元素的关注向上箭头工作一次,然后失去焦点
使用符合 508 标准的 Angular 7 通过键盘重新排序表格。为了可访问性,我需要能够通过键盘重新排列项目的顺序。因此,如果我有项目 (1,2,3) 并且用户想要将顺序更改为 (3,1,2) 他们需要能够使用箭头键这样做。
在表格中,每行的第一个单元格是一个可点击的手柄,用于拖放行以更改顺序。如果我使用键盘将焦点切换到该元素,那么我需要能够在焦点位于该手柄上时使用向上或向下箭头更改项目的顺序。
预期结果:用户将使用 TAB 键导航到拖放手柄。从那里他们将使用向上或向下箭头键来更改表项的索引号。这将允许他们在保存项目顺序之前通过键盘选择表格中项目的顺序。
问题:使用箭头键和下面的代码时,向下箭头键按预期工作。但是向上箭头键只能使用一次。单击向上后,它会正确移动项目,但会失去手柄的焦点。我需要一种方法来保持拖放手柄的焦点,以便用户可以选择表格中项目的顺序。
ts:
arrowUpEvent(index: number) {
if (index !== 0) {
const upperItem = this.movedItem[index - 1];
this.movedItem[index - 1] = this.movedItem[index];
this.movedItem[index] = upperItem;
}
}
arrowDownEvent(index: number) {
if (index !== this.movedItem.length) {
const lowerItem = this.movedItem[index + 1];
this.movedItem[index + 1] = this.movedItem[index];
this.movedItem[index] = lowerItem;
}
}
html:
<tr [pReorderableRow]="index">
<th scope="row" class="customized-table-th" *ngIf="!this.readOnlyAccess">
<a target="_self" rel="noopener noreferrer" href="#"
(keydown.arrowdown)="arrowDownEvent(index)"
(keydown.arrowup)="arrowUpEvent(index)"
onclick="return false;" style="color:black;">
<i class="fa fa-bars" pReorderableRowHandle></i>
</a>
</th>
</tr>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。