Javascript - Фокусировать элемент на клавиатуре, когда ни один элемент на странице не имеет фокуса - PullRequest
Новая
       28

Javascript - Фокусировать элемент на клавиатуре, когда ни один элемент на странице не имеет фокуса

0 голосов
/ 21 января 2019

У меня есть набор кнопок. Когда у них есть фокус, они меняют цвет. Они могут получить фокус, когда пользователь наводит курсор на них или когда пользователь использует клавиши со стрелками вверх и вниз.

Когда ни одна кнопка не имеет фокуса (например, когда пользователь щелкает где-то еще), нажатие клавиш со стрелками сместит фокус на первую кнопку. По крайней мере, так и задумано.

Однако, поскольку у меня одни и те же клавиши выполняют разные действия, всякий раз, когда я нажимаю клавишу «Вниз», фокус переходит на первую кнопку и сразу на вторую.

Кажется, я не могу найти способ сделать это так, как мне бы хотелось. Могу ли я что-нибудь сделать, чтобы сохранить фокус на первой кнопке, когда нажата кнопка со стрелкой вниз, когда ни одна кнопка не имеет фокуса?

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

var divs = document.getElementsByClassName("blueBtn");
for (var i = 0; i < divs.length; i++) {
    divs[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);
    divs[i].addEventListener("mouseover", function(event) {
        this.focus();
    }, false);
}

document.body.addEventListener("keydown", function(event) {
    if (document.body === document.activeElement && (event.keyCode === 38 || event.keyCode === 40)) {
        defaultBtn.focus();
    }
});
.blueBtn {
    display: block;
}

.blueBtn:hover,
.blueBtn:focus {
    background-color: blue;
}
<button id="defaultBtn" class="blueBtn" autofocus>Button 01</button>
<button class="blueBtn">Button 02</button>
<button class="blueBtn">Button 03</button>
<button class="blueBtn">Button 04</button>

1 Ответ

0 голосов
/ 21 января 2019

Должны быть другие, даже лучшие способы сделать это, но вот мое предложение. Я просто использовал логическую переменную, чтобы отслеживать, когда фокус исходит от тела. 

var divs = document.getElementsByClassName("blueBtn");
var fromBody = false;

for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener("keyup", function(event) {
    if (event.keyCode == 38) {
      if (fromBody) {
        fromBody = false;
        return;
      }
      if (this.previousElementSibling) {
        this.previousElementSibling.focus();
      }
    } else if (event.keyCode == 40) {
      if (fromBody) {
        fromBody = false;
        return;
      }
      if (this.nextElementSibling && !fromBody) {
        this.nextElementSibling.focus();
      }
    }
  }, false);
  divs[i].addEventListener("mouseover", function(event) {
    this.focus();
  }, false);
}

document.body.addEventListener("keydown", function(event) {
  if (document.body === document.activeElement && (event.keyCode === 38 || event.keyCode === 40)) {
    fromBody = true;
    defaultBtn.focus();
  }
});
.blueBtn {
  display: block;
}

.blueBtn:hover,
.blueBtn:focus {
  background-color: blue;
}
<button id="defaultBtn" class="blueBtn" autofocus>Button 01</button>
<button class="blueBtn">Button 02</button>
<button class="blueBtn">Button 03</button>
<button class="blueBtn">Button 04</button>
...