角度:我想将div的焦点从箭头键按钮上移到另一个 [英] Angular: I want to move focus of div from to another on arrow key buttons

问题描述

我正在做角度项目，遇到这样的情况:我连续有一系列的div，当用户单击任何一个div时，他应该能够使用箭头键从一个div移到另一个div.

I am working on angular project and came to a situation where i have series of div in a row and when user clicks on any div he should be able to move from one div to another using arrow key.

请帮助.

我尝试使用按键事件，但并没有帮助我.试图找出关于stackoverflow的类似问题，但所有答案都在jquery中，我需要在打字稿中输入.

I tried using keypress event but it didn't helped me. Tried finding out similar questions on stackoverflow but all answers where into jquery and i need it in in 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.此后，如果用户使用键盘并按箭头键，则应将焦点移至下一个/上一个单元格.

In my code If user clicks on cell 2, focus should automatically go to cell 2. After that If user use keyboard and press arrow keys it should move focus to next/prev cell.

推荐答案

keypress 未检测到箭头键，而是使用 keydown .为了获得焦点并聆听按键事件，请向div添加属性 tabindex .

keypress does not detect the arrow keys, instead use keydown. In order to receive the focus and listen to the key events add attribute tabindex to the divs.

对于右箭头键，您需要检查当前活动元素是否不是最后一个元素，并将焦点更改为下一个元素.

For right arrow key, you need to check if current active element is not a last element, and change the focus to the next element.

对于左箭头键，检查当前活动元素是否不是第一个元素，然后将焦点更改为上一个元素.

For left arrow key, check whether current active element is not a first element and then change the focus to the previous element.

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

这篇关于角度:我想将div的焦点从箭头键按钮上移到另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！