如何解决如何通过向上/向下箭头键访问div或<li>
所以我有div
个,一个在另一个之下。我希望通过箭头键使它们“可通过网络访问”,即,如果我按下向下键,则应突出显示div
,如果我按下向上键,则应突出显示前一个。
问题是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')
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。