Question

我目前正在制作网络漫画应用程序，当您进一步阅读漫画时，您可以使用箭头键（左侧和右侧）显示下一个面板。我希望做的是每次使用箭头时移动焦点，并在元素第一次在页面上聚焦时启动轻微的动画。

如果已经聚焦的元素再次聚焦，则动画不会重复。

我已经完成了所有事情，我只需要通过tabindex循环，以便正确地转移焦点，我不知道如何做到这一点。 StackOverflow社区非常新，所以我很高兴听到一些回复！

Answer 1

我不确定您是否可以直接访问tabIndex已注册的所有元素。另一种方法是在数组中维护所有元素，然后为每个keydown事件更改焦点。类似于：

<!DOCTYPE html>
<html>
<body onkeydown="keyDownFn()" onload="init()">

<p>Try navigating the links below by using any key on you keyboard </p>

<p><div id="myAnchor1" tabIndex="1">Link 1</div></p>
<p><div id="myAnchor2" tabIndex="1">Link 2</div></p>
<p><div id="myAnchor3" tabIndex="1">Link 3</div></p>

<script>
var elements;
var current = 1;
var max = 0;
function keyDownFn() {
    // you can add a check for specific keys here.
    elements[current % max].focus();
    current = current+1;
}

function init() {
    // all elements that you want to focus in turn can be stored on load.
    elements = document.getElementsByTagName('div');
    max = elements.length;
    document.getElementById("myAnchor1").focus();
}

</script>

</body>
</html>

在https://jsfiddle.net/4my90g4v/

处小提琴

focus()应调用您正在制作动画的元素上注册的onFocus方法。

使用基于keydown（）的tabindex将焦点转移到下一个元素

1 个答案: