Question

我有一组按钮可以触发页面上的不同功能。用户可以像往常一样将鼠标悬停在所需的按钮上并单击它，或者可以使用向上和向下箭头键在按钮之间导航，然后按Enter键以触发相应的功能。

使用箭头键，当前聚焦的按钮具有与其他按钮不同的颜色（绿色）。悬停的按钮也为绿色。

就目前而言，一个以上的按钮可能会变成绿色：悬停的按钮和聚焦的按钮。我不希望这种情况发生。

理想的解决方案是将焦点更改为悬停在哪个按钮上。这可能吗？如果是这样，我该如何实现？最好不要使用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" />

Answer 1

您可以将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" />

Answer 2

我不太喜欢使用鼠标悬停来转移焦点。如果您不希望在字段具有焦点的情况下显示悬停状态，则可以添加一个环绕式div并使用“焦点内”。

由于ie和edge不支持焦点内移，因此您可以使用.enable-hover类（在焦点/模糊上切换）来添加模拟焦点

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>

JavaScript-将焦点转移到悬停元素

2 个答案: