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

我目前正在研究网络漫画应用程序，并且当您使用箭头键（左侧和右侧）进一步阅读漫画时，显示下一个面板的任何一个。我期望做的是每次使用箭头时移动焦点，并在元素首次在页面上对焦时启动轻微动画。使用基于keydown（）的tabindex将焦点移至下一个元素

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

我已经得到了一切非常下来我只需要通过tabindex循环以正确转移焦点，我不知道该怎么做。非常新的StackOverflow社区，所以我很高兴听到一些回应！

来源

2016-12-21 Nick Nutting

你试过'触发（'焦点'）'？ – madalinivascu

我不确定你的意思。这只会将焦点从隐藏或显示。它不适用于大量不同的元素。 –

我不确定您是否可以直接访问已注册tabIndex的所有元素。其他方法是将所有元素都保存在一个数组中，然后在每个事件中更改焦点。类似于：

<!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方法。

来源

2016-12-21 07:27:48

谢谢Anurag Sinha！你认为我应该把动画放在我的焦点功能中吗？另外，你能告诉我如何把我所有的工作都放到一个数组中来测试你的第二个想法。考虑到我将拥有多个页面，具体取决于这些功能集合，我认为我需要推迟到这样的事情，因为它会更容易。 –

另外我需要我的代码基于左右箭头并向前和向后移动。你所展示的这段代码只是数学上的推动而已。实际的事件本身并不重要。那有意义吗？ –

这里是更新的小提琴，你可以继续使用onKeyDown事件监听器。只有改变你所要做的就是接收事件对象，它包含关于事件的所有细节（在更新的提琴中引用keyDownFn函数）。从事件对象使用keyCode来获取哪个键被按下，并基于该键您可以更新您的逻辑。我已经更新了小提琴 - 参考https://jsfiddle.net/4my90g4v/1/这现在改变焦点基于左和右箭头（keyCode 37和39）。希望这会有所帮助。 –

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

回答

相关问题