Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выбор элемента html клавишами. (https://javascript.ru/forum/events/66784-vybor-ehlementa-html-klavishami.html)

Александр Македонский 10.01.2017 16:03

Цитата:

Сообщение от ksa (Сообщение 440225)
На каком элементе находится фокус первоначально?

Да без разницы, можно первую кнопку.

ksa 10.01.2017 16:04

Цитата:

Сообщение от Александр Македонский
я не знаю как сделать это по клавишам

Вот на то статейка есть...

Александр Македонский 10.01.2017 16:05

Есть такая мысль, при нажатии стрелок, меняем css кнопки для выделения как таргета, так будет норм?

ksa 10.01.2017 16:08

Цитата:

Сообщение от Александр Македонский
меняем css кнопки для выделения как таргета

:blink:

Делай примеры... Как я. ;)

Александр Македонский 10.01.2017 16:11

Цитата:

Сообщение от ksa (Сообщение 440232)
:blink:

Делай примеры... Как я. ;)

Ну например сделать два стиля кнопки, простой и с границей. При выборе кнопки меняется стиль и она типа выделена:)

Dilettante_Pro 10.01.2017 16:25

В качестве черновика
<style>
button{
    cursor: pointer;
    text-align: left;
    width:130px;
    height:25px
}
.buttons{
  width: 132px;
  float: left;
}
.active {
  background-color:lightblue;
}

</style>
<div class ="buttons">
   <button  onclick="showImg(0)">first</button>
   <button  onclick="showImg(1)">second</button>
   <button  onclick="showImg(2)">third</button>
</div>
<img id="im" src= "" />
<script>
 var images = ["http://javascript.ru/cat/list/donkey.gif","http://javascript.ru/cat/list/js.gif","http://javascript.ru/cat/list/project.jpg"],
 but = document.getElementsByTagName('button'),
 i = 0;
 but[i].focus();
 but[i].blur();
but[i].classList.add('active');
showImg(i);
  document.onkeydown = function(e) {
      e.preventDefault();
      but[i].classList.remove('active');
      if(e.keyCode == 39 || e.keyCode == 40) { i++; }
      if(e.keyCode == 37 || e.keyCode == 38) { i--; }
      if(i < 0) { i = 2;}
      if(i > 2) { i = 0;}
      but[i].classList.add('active');
      showImg(i); 
  }
function showImg(index) {
   but[i].classList.remove('active');
   im.src = images[index];
   i = index;
   but[i].classList.add('active');
}
</script>

фокусы с фокусом (строки 27-28) - только для того, чтобы стрелки сразу работали в демо

Александр Македонский 10.01.2017 17:07

Цитата:

Сообщение от Dilettante_Pro (Сообщение 440238)
В качестве черновика

Офигенный пример! Спасибо, буду разбирать:dance:


Часовой пояс GMT +3, время: 22:32.