Javascript 使用基于keydown（）的tabindex将焦点转移到下一个元素
我目前正在开发一个网络漫画应用程序，当你进一步阅读漫画时，你可以使用箭头键（左键和右键）来显示下一个面板。我想做的是每次使用箭头时转移焦点，当元素在页面上第一次处于焦点时启动轻微的动画 如果已处于焦点的元素再次获得焦点，则动画不会重复Javascript 使用基于keydown（）的tabindex将焦点转移到下一个元素,javascript,jquery,html,css-animations,Javascript,Jquery,Html,Css Animations,我目前正在开发一个网络漫画应用程序，当你进一步阅读漫画时，你可以使用箭头键（左键和右键）来显示下一个面板。我想做的是每次使用箭头时转移焦点，当元素在页面上第一次处于焦点时启动轻微的动画 如果已处于焦点的元素再次获得焦点，则动画不会重复 我把所有的东西都记下来了，我只需要在tabindex中循环，以便正确地转移焦点，我不知道怎么做。StackOverflow社区非常新，所以我很高兴听到一些回应 我不确定您是否可以直接访问所有注册了tabIndex的元素。另一种方法是将所有元素保持在一个数组中，然后
我把所有的东西都记下来了，我只需要在tabindex中循环，以便正确地转移焦点，我不知道怎么做。StackOverflow社区非常新，所以我很高兴听到一些回应 我不确定您是否可以直接访问所有注册了
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>
尝试使用键盘上的任意键导航以下链接
链接1
链接2
链接3
var元素；
无功电流=1；
var max=0；
函数keyDownFn（）{
//您可以在此处添加特定密钥的检查。
元素[当前%max].focus（）；
电流=电流+1；
}
函数init（）{
//您希望依次聚焦的所有元素都可以加载存储。
elements=document.getElementsByTagName（'div'）；
max=元素长度；
document.getElementById（“myAnchor1”）.focus（）；
}
摆弄
focus（）
应该调用在您制作动画的元素上注册的onFocus
方法。您是否尝试过trigger（'focus'）
？我不确定您的意思。这将使焦点从隐藏或显示中转移。它不会与大量不同的元素一起工作。谢谢你Anurag Sinha！你认为我应该在对焦功能中加入动画吗？另外，你能告诉我如何将我所有的工作放入一个数组来测试你的第二个想法吗。考虑到我将有多个页面取决于这些函数集，我认为我需要遵循类似的方式，因为这样会更容易。我还需要我的代码基于左右箭头并向前和向后移动。您展示的这段代码只是在数学基础上向前推进的。实际事件本身并不重要。这有意义吗？这是更新的fiddle，您可以继续使用onKeyDown事件侦听器。您需要做的唯一更改是接收事件对象，该对象包含有关事件的所有详细信息（请参阅更新的fiddle中的keyDownFn函数）。从事件对象使用keyCode获取按下的键，并基于此更新逻辑。我已经更新了提琴-参考，现在根据左箭头和右箭头（键码37和39）更改焦点。希望这会有所帮助。关于您的第一条评论，是的，您可以在focus方法中添加动画。您可以在一个数组中保存页面的ID。或者，它可以是任何其他标识符，帮助您识别即将进入查看的当前页面。另一个关于识别按下哪个键的链接：