html – 如何在div之间实现箭头键导航

我有以下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键.理想情况下,我想将选项视为选择并使用向上/向下箭头导航.可以这样做吗？

另外…
是否有任何方法可以使用带有复选框样式的选项进行多选,以反映每个选项的选择状态？

解决方法

我认为你需要javascript并使用插件是一种更简单的方法来完成任务和维护跨浏览器功能.但是,这里有一个 fiddle,我认为,只需使用javascript即可.它定义了select元素的附加属性,并使用onkeydown函数来处理元素之间的导航.

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>

此代码非常特定于所提出的问题,虽然它可以解决问题,但使用通用插件可能会更好,这样可以在整个环境中实现更广泛的应用.您可能还会遇到与用户期望向下和向上箭头键相关的问题以及通过拦截它们所做的事情相关的问题.

根据我的经验,我遇到了一些问题,其中不同的浏览器甚至不同的最终用户平台对应用程序呈现不同的行为,使得实现一致性不稳定.许多插件旨在消除这种不一致性,并提供更清晰,更直观的界面.

原文地址：https://www.jb51.cc/html/226844.html