Перемещение по DIV'ам с помощью кнопок на JavaScript

376

20 марта 2017, 10:03

Интересует возможность перемещения по элементам DIV с помощью клавиатуры (кнопок: вверх, вниз, вправо, влево). К примеру, при нажатии кнопки вниз, мы будем переходить в DIV, который под нами; при нажатии вправо мы будем переходить в соседний DIV справа и так далее. Интересует именно решение на чистом JS.

Заранее спасибо!

onload = function() { 
  for (var j = 0, cl = document.getElementsByTagName('div'), lg = cl.length; j < lg; j++) cl[j].onclick = myFunc; 
}; 
 
function myFunc(elem) { 
  var e = window.event || elem, 
    obj = e.target || e.srcElement; 
  console.log(obj.innerText); 
  obj.style.border = '0.5px solid red'; 
} 
window.addEventListener('keydown', function(event) { 
  if (event.keyCode == "13") { 
 
    console.log("Enter" + this); 
  } else if (event.keyCode == "37") { 
 
    console.log("Left"); 
  } else if (event.keyCode == "38") { 
 
    console.log("Up"); 
  } else if (event.keyCode == "39") { 
 
    console.log("Right"); 
  } else if (event.keyCode == "40") { 
 
    console.log("Down"); 
  } 
 
 
}, true);

Answer 1

Для сеточного расположения

var cell = document.querySelectorAll('.box-cell'), 
  cell_active = null; 
 
window.addEventListener('keydown', function(event) { 
  if (event.keyCode == "13") { 
 
    if (cell_active !== null) { 
      cell[cell_active].classList.remove('box-cell--active'); 
    }; 
 
    cell_active = 0; 
 
    cell[cell_active].classList.add('box-cell--active'); 
 
  } else if (event.keyCode == "37") { 
 
    if (cell_active !== null && cell_active !== 0 && cell_active !== 3 && cell_active !== 6) { 
      cell[cell_active].classList.remove('box-cell--active'); 
 
      cell_active = cell_active - 1; 
 
      cell[cell_active].classList.add('box-cell--active'); 
    }; 
 
  } else if (event.keyCode == "38") { 
 
    if (cell_active !== null && cell_active !== 0 && cell_active !== 1 && cell_active !== 2) { 
      cell[cell_active].classList.remove('box-cell--active'); 
 
      cell_active = cell_active - 3; 
 
      cell[cell_active].classList.add('box-cell--active'); 
    }; 
 
  } else if (event.keyCode == "39") { 
 
    if (cell_active !== null && cell_active !== 2 && cell_active !== 5 && cell_active !== 8) { 
      cell[cell_active].classList.remove('box-cell--active'); 
 
      cell_active = cell_active + 1; 
 
      cell[cell_active].classList.add('box-cell--active'); 
    }; 
 
  } else if (event.keyCode == "40") { 
 
    if (cell_active !== null && cell_active !== 6 && cell_active !== 7 && cell_active !== 8) { 
      cell[cell_active].classList.remove('box-cell--active'); 
 
      cell_active = cell_active + 3; 
 
      cell[cell_active].classList.add('box-cell--active'); 
    }; 
 
  } 
});

.box { 
  display: flex; 
  flex-wrap: wrap; 
  width: 303px; 
  border-right: 1px solid #000; 
  border-bottom: 1px solid #000; 
} 
 
.box-cell { 
  width: 100px; 
  height: 100px; 
  border-left: 1px solid #000; 
  border-top: 1px solid #000; 
} 
 
.box-cell--active { 
  background-color: #000; 
}

Для введения нажмите Enter! 
 
<div class="box"> 
  <div class="box-cell"></div> 
  <div class="box-cell"></div> 
  <div class="box-cell"></div> 
  <div class="box-cell"></div> 
  <div class="box-cell"></div> 
  <div class="box-cell"></div> 
  <div class="box-cell"></div> 
  <div class="box-cell"></div> 
  <div class="box-cell"></div> 
</div>

UPDATE: Реализация с Tab:

window.addEventListener('keydown', function(event) { 
  if (event.keyCode == "13") { 
    var div_focus = document.querySelector('.block:focus'); 
     
    if( div_focus ){ 
      console.log( div_focus.innerHTML ); 
    }; 
  } 
});

<p>Выберите кнопкой Tab блок и нажмите Enter</p> 
 
<div class="block" tabindex="0">Текст 1</div> 
<div class="block" tabindex="0">Текст 2</div> 
<div class="block" tabindex="0">Текст 3</div> 
<div class="block" tabindex="0">Текст 4</div> 
<div class="block" tabindex="0">Текст 5</div> 
<div class="block" tabindex="0">Текст 6</div>

Реализация с помощью кнопок вправо и влево:

window.addEventListener('keydown', function(event) { 
  var blocks = document.querySelectorAll('.block'), 
      block_selected = document.querySelector('.block.block--select'); 
   
  if (event.keyCode == "13") { 
    console.log( block_selected.innerHTML ) 
  } else if (event.keyCode == "37") { 
    for(var i = 0; i < blocks.length; i++){ 
      if( blocks[i].classList.contains('block--select') && i !== 0){ 
        blocks[i - 1].classList.add('block--select'); 
        blocks[i].classList.remove('block--select'); 
         
        break; 
      }; 
    }; 
  } else if (event.keyCode == "39") { 
    for(var i = 0; i < blocks.length; i++){ 
      if( blocks[i].classList.contains('block--select') && i !== blocks.length - 1){ 
        blocks[i + 1].classList.add('block--select'); 
        blocks[i].classList.remove('block--select'); 
         
        break; 
      }; 
    }; 
  } 
});

.block--select {color: red;}

<p>Выберите кнопкой Tab блок и нажмите Enter</p> 
 
<div class="block">Текст 1</div> 
<div class="block">Текст 2</div> 
<div class="block block--select">Текст 3</div> 
<div class="block">Текст 4</div> 
<div class="block">Текст 5</div> 
<div class="block">Текст 6</div>

Но этот вариант нужно доработать.