如何通过向上/向下箭头键访问div或<li>

问题描述

所以我有div个，一个在另一个之下。我希望通过箭头键使它们“可通过网络访问”，即，如果我按下向下键，则应突出显示div，如果我按下向上键，则应突出显示前一个。

如果我有一个按钮，我可以使用tabIndex属性来实现它。

问题是div是不可操作的项目。因此，如果我使用户可以通过标签以某种方式访问​​它们，可能会使用户感到困惑。因此，我只需要通过键盘上的箭头键即可。

如果可以实现所需的行为，我什至愿意将其转换为<ul><li><li></ul>。

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>

这是我尝试使用<li>的方法。但是，如果我单击第一个li，则无法通过按下向下箭头突出显示下一个。

<ul role="menu" aria-label="menu">
            <li role="menuitem" tabindex="0">list 1</li>
            <li role="menuitem" tabindex="0">list 2</li>
            <li role="menuitem" tabindex="0">list 3</li>
            <li role="menuitem" tabindex="0">list 4</li>
            <li role="menuitem" tabindex="0">list 5</li>
    </ul>

解决方法

嗨，您应该使用jquery来实现所需的功能。您的最后一个来源是：

$(function(){
        document.onkeydown = function(e) {
            var selected = $('.mnu-item:focus').index();

            var next = selected + 1;
            var pre = selected - 1;

            if(pre < 0)
                pre = 0;
            if(next > $('.mnu-item').length)
                next = $('.mnu-item').length;

            if(e.which == 38) { // up
                $('.mnu-item').eq(pre).focus();
            }
            if(e.which == 40) { // down
                $('.mnu-item').eq(next).focus();
            }
            e.preventDefault(); // prevent the default action (scroll / move caret)
        };
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul role="menu" aria-label="menu">
    <li role="menuitem" tabindex="0" class="mnu-item">list 1</li>
    <li role="menuitem" tabindex="0" class="mnu-item">list 2</li>
    <li role="menuitem" tabindex="0" class="mnu-item">list 3</li>
    <li role="menuitem" tabindex="0" class="mnu-item">list 4</li>
    <li role="menuitem" tabindex="0" class="mnu-item">list 5</li>
</ul>

我希望这会有用。

,

有一个 ARIA 小部件，它允许通过箭头键进行键盘导航，使用一个制表位而不是多个制表位：您的相似 <div> 列表可以表述为单列 Grid。

最初，第一行中的单元格获得 tabindex="0"，所有其他单元格获得 tabindex="-1"。

使用 JavaScript，向下箭头聚焦第二行中的单元格。它获得 tabindex="0" 而第一行中的单元格获得 tabindex="-1"，因此只有一个单元格是可选项卡/可聚焦的。全键盘处理在 examples/docs 中指定。

在 JavaScript 中，您需要跟踪当前关注的项目。

以下是我将如何使用 React 进行设置：

class MyGrid extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            focusedItemIndex: 0
        }

        this.cellRefs = []

        this.handleFocus = (index => {
            this.setState(() => ({
                focusedItemIndex: index
            }))
        }).bind(this)

        this.handleKeydown = ((index,{
            key
        }) => {
            switch (key) {
                case 'ArrowUp': {
                    this.setState(() => ({
                        focusedItemIndex: Math.max(0,index - 1)
                    }))
                }
                break
                case 'ArrowDown': {
                    this.setState(() => ({
                        focusedItemIndex: Math.min(index + 1,this.props.items.length - 1)
                    }))
                }
                break
                case 'Home': {
                    this.setState(() => ({
                        focusedItemIndex: 0
                    }))
                }
                break
                case 'End': {
                    this.setState(() => ({
                        focusedItemIndex: this.props.items.length - 1
                    }))
                }
                break
                default: {
                    return
                }
            }
        }).bind(this)
    }
    componentDidUpdate(_,prevState) {
        if (prevState.focusedItemIndex !== this.state.focusedItemIndex) {
            this.cellRefs[this.state.focusedItemIndex].focus()
        }
    }
    render() {
        return (
            <div
                role="grid"
                aria-label="This needs a label">
                <div role="row">
                    {this.props.items.map((item,index) => (
                        <div
                            role="cell"
                            key={item}
                            ref={el => this.cellRefs[index] = el}
                            tabIndex={this.state.focusedItemIndex === index ? '0' : '-1'}
                            onFocus={this.handleFocus.bind(this,index)}
                            onKeyDown={this.handleKeydown.bind(this,index)}>
                            {item}
                        </div>
                    ))}
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <MyGrid items={['A','B','C']} />,document.querySelector('body')
)