大佬教程收集整理的这篇文章主要介绍了html – 如何在div之间实现箭头键导航,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<div id="multi-picker"> <div id="opt1"> <input type="checkbox"> Option 1 </div> <div id="opt2"> <input type="checkbox"> Option 2 </div> etc... </div>
一切正常,但我对键盘导航不满意.要从opt1导航到opt2,我需要按Tab键.理想情况下,我想将选项视为选择并使用向上/向下箭头导航.可以这样做吗?
另外…
是否有任何方法可以使用带有复选框样式的选项进行多选,以反映每个选项的选择状态?
function keyPressed(E) { var srcElement = e.target; // get the element that fired the onkeydown function var dataset = false; var SELEctList = false; var next = ""; var prev = ""; if (srcElement.dataset) { // can we use HTML5 dataset? dataset = true; // remember for later // is this an element for which we care if (srcElement.dataset.SELEctlist == 'true') { SELEctList = true; } } else { // can't use HTML5 dataset,use getAttribute if (srcElement.getAttribute('data-SELEctlist') == 'true') { SELEctList = true; } } // is it a SELEct element and the user pressed either up arrow or down arrow if (SELEctList && (e.keyCode == '38' || e.keyCode == '40')) { // get the next and prev navigation options for this element if (dataset) { next = srcElement.dataset.next; prev = srcElement.dataset.prev; } else { next = srcElement.getAttribute('data-next'); prev = srcElement.getAttribute('data-prev'); } // up arrow was pressed and a prev element is defined if (e.keyCode == '38' && prev != '') { document.getElementById(prev).focus(); } // down arrow was pressed and a next element is defined if (e.keyCode == '40' && next != '') { document.getElementById(next).focus(); } // don't do native processing of the up or down arrow (page scrolling) e.preventDefault; } } document.onkeydown = keyPressed;
这是包含其他元素的新html:
<div id="multi-picker"> <div id="opt1"> <input id="SELEct1" type="checkbox" data-SELEctlist="true" data-prev="" data-next="SELEct2"> Option 1 </div> <div id="opt2"> <input id="SELEct2" type="checkbox" data-SELEctlist="true" data-prev="SELEct1" data-next=""> Option 2 </div> </div>
此代码非常特定于所提出的问题,虽然它可以解决问题,但使用通用插件可能会更好,这样可以在整个环境中实现更广泛的应用.您可能还会遇到与用户期望向下和向上箭头键相关的问题以及通过拦截它们所做的事情相关的问题.
根据我的经验,我遇到了一些问题,其中不同的浏览器甚至不同的最终用户平台对应用程序呈现不同的行为,使得实现一致性不稳定.许多插件旨在消除这种不一致性,并提供更清晰,更直观的界面.
以上是大佬教程为你收集整理的html – 如何在div之间实现箭头键导航全部内容,希望文章能够帮你解决html – 如何在div之间实现箭头键导航所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。