JavaScript - смещение фокуса на скрытый элемент - PullRequest
Новая
       12

JavaScript - смещение фокуса на скрытый элемент

0 голосов
/ 27 декабря 2018

У меня есть набор кнопок, которые запускают различные функции на странице.Пользователь может навести курсор на нужную кнопку и щелкнуть по ней, как обычно, или перемещаться по кнопкам с помощью клавиш со стрелками вверх и вниз и нажать клавишу ввода, чтобы вызвать соответствующую функцию.

Использование клавиш со стрелкамикнопка, которая в данный момент находится в фокусе, имеет цвет, отличный от других (зеленый).Кнопки, которые находятся на экране, также зеленые.

Поскольку сейчас все обстоит так, возможно, чтобы несколько кнопок были зелеными: зависшая и сфокусированная.Я не хочу, чтобы это произошло.

Идеальным решением было бы изменить фокусировку на ту, на которую наведите кнопку.Это возможно?Если так, как я могу достичь этого?Желательно, не прибегая к jQuery.

Вот с чем я работаю: 

        var inputs = document.getElementsByClassName("move");
        for (var i = 0; i < inputs.length; i++)
            inputs[i].addEventListener("keyup", function(event) {
                if (event.keyCode == 38) {
                    if (this.previousElementSibling) {
                        this.previousElementSibling.focus();
                    }
                } else if (event.keyCode == 40) {
                    if (this.nextElementSibling) {
                        this.nextElementSibling.focus();
                    }
                }
            }, false);
        .move {
            display: block;
            width: 200px;
            padding: 10px;
            text-align: center;
            background-color: aquamarine;
            margin-top: 10px;
        }

        .move:hover, .move:focus {
            background-color: greenyellow;
        }
    <input class="move" type="button" value="1" autofocus />
    <input class="move" type="button" value="2" />
    <input class="move" type="button" value="3" />

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Для этого можно использовать событие mouseover с функцией focus.Должно работать нормально ... 

        var inputs = document.getElementsByClassName("move");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener("keyup", function(event) {
                if (event.keyCode == 38) {
                    if (this.previousElementSibling) {
                        this.previousElementSibling.focus();
                    }
                } else if (event.keyCode == 40) {
                    if (this.nextElementSibling) {
                        this.nextElementSibling.focus();
                    }
                }
            }, false);
            inputs[i].addEventListener("mouseover", function(event) {
                this.focus();
            }, false);
        }
        .move {
            display: block;
            width: 200px;
            padding: 10px;
            text-align: center;
            background-color: aquamarine;
            margin-top: 10px;
        }

        .move:hover, .move:focus {
            background-color: greenyellow;
        }
    <input class="move" type="button" value="1" autofocus />
    <input class="move" type="button" value="2" />
    <input class="move" type="button" value="3" />
0 голосов
/ 27 декабря 2018

Я не большой поклонник использования наведения мыши для смещения фокуса.Если вы не хотите, чтобы отображалось состояние при наведении, если поле имеет фокус, вы можете добавить оберточный div и использовать focus-inside.

Поскольку фокусировка внутри не поддерживается в ie и edge, вы можете добавить имитацию, используя класс .enable-hover, который вы переключаете на focus / blur 

const wrapper = document.querySelector('.group');
[].slice
    .call(document.querySelectorAll('.move'))
    .map(input => {

      input.addEventListener('focus', e => {
          wrapper.classList.remove('enable-hover')
      });

      input.addEventListener('blur', e => {
          wrapper.classList.add('enable-hover')
      });
      
      input.addEventListener('keyup', e => {
          if (e.keyCode == 38 && input.previousElementSibling)
            input.previousElementSibling.focus();
          if (e.keyCode == 40 && input.nextElementSibling)
            input.nextElementSibling.focus();
      });     
  })
.group:not(:focus-within) > .move:hover,
.group.enable-hover > .move:hover, 
.move:focus {
  background: greenyellow;
 }  

.move {
  display: block;
  width: 200px;
  padding: 10px;
  text-align: center;
  background-color: aquamarine;
  margin-top: 10px;
}
<div class="group">
    <input class="move" type="button" value="1" autofocus />
    <input class="move" type="button" value="2" />
    <input class="move" type="button" value="3" />
</div>
...