javascript - Angular:我想将 div 的焦点从箭头键按钮移到另一个

Question

我正在从事 Angular 项目，遇到这样一种情况，我有一系列连续的 div，当用户点击任何 div 时，他应该能够使用箭头键从一个 div 移动到另一个 div。

请帮忙。

我尝试使用按键事件，但它对我没有帮助。尝试在 stackoverflow 上找到类似的问题，但所有答案都在 jquery 中，我需要在 typescript 中找到它。

moveCell(e){
  console.log(e);
}

.container{
width: 100%;
}

.cell{
width: 100px;
float:left;
}

.cell:hover,
.cell:focus{
background: red;
}

<div class="container">
<div class="cell" (keypress)="moveCell($event)">cell 1</div>
  <div class="cell" (keypress)="moveCell($event)">cell 2</div>
  <div class="cell" (keypress)="moveCell($event)">cell 3</div>
  <div class="cell" (keypress)="moveCell($event)">cell 4</div>
  <div class="cell" (keypress)="moveCell($event)">cell 5</div>
  <div class="cell" (keypress)="moveCell($event)">cell 6</div>
  <div class="cell" (keypress)="moveCell($event)">cell 7</div>
  <div class="cell" (keypress)="moveCell($event)">cell 8</div>
  <div class="cell" (keypress)="moveCell($event)">cell 9</div>
</div>

在我的代码中如果用户点击单元格 2，焦点应该自动转到单元格 2。之后如果用户使用键盘并按箭头键，它应该将焦点移动到下一个/上一个单元格。

Answer 1

keypress 不检测箭头键，而是使用keydown。为了接收焦点并监听按键事件，将属性 tabindex 添加到 div。

对于右箭头键，您需要检查当前事件元素是否不是最后一个元素，并将焦点转移到下一个元素。

对于左箭头键，检查当前事件元素是否不是第一个元素，然后将焦点切换到上一个元素。

--HTML--

<div class="container">
  <div tabindex="0" class="cell" (keydown)="moveCell($event)">cell 2</div>
  <div tabindex="1" class="cell" (keydown)="moveCell($event)">cell 3</div>
  <div tabindex="2" class="cell" (keydown)="moveCell($event)">cell 4</div>
  <div tabindex="3" class="cell" (keydown)="moveCell($event)">cell 5</div>
  <div tabindex="4" class="cell" (keydown)="moveCell($event)">cell 6</div>
  <div tabindex="5" class="cell" (keydown)="moveCell($event)">cell 7</div>
  <div tabindex="6" class="cell" (keydown)="moveCell($event)">cell 8</div>
</div>

--组件代码--

  length: 0;
  domEles;
  moveCell(e){
    const activeEle = document.activeElement;
    const activeEleIndex = Array.prototype.indexOf.call(this.domEles, activeEle);
    if(e.key == "ArrowRight" && activeEleIndex < this.length - 1 ) {
        activeEle.nextElementSibling.focus();
    } 

    if(e.key == "ArrowLeft" && activeEleIndex > 0) {
       activeEle.previousElementSibling.focus();
    }
  }

  ngOnInit() {
    this.domEles = document.querySelectorAll('.container > *');
    this.length = this.domEles.length;
  }

工作代码 - https://stackblitz.com/edit/angular-5qxicw .