使用箭头键浏览列表?(JavaScript/JQ)
Navigate through list using arrow keys? (JavaScript/JQ)
我似乎找不到如何实现这一点的答案,但这是我见过好几次的功能。本质上,我是在回显一个列表,我想创建使用箭头键/回车键突出显示和选择这些项目的功能。有人能帮我想一想如何才能做到这一点吗?我知道如何使用键代码(当然),只是不知道如何将其转化为选择列表中项目的功能代码。。。
我在想,也许我必须有某种隐藏的单选按钮来标记它是否被选中。。。但即便如此,我也不知道如何在列表中从一个单选按钮跳到另一个。所以,如果有人能帮我一把,我真的很感激。谢谢。
由于您没有真正解释您遇到的问题,我只是创建了一个通用解决方案。希望这能有所帮助:
var li = $('li');
var liSelected;
$(window).keydown(function(e) {
if(e.which === 40) {
if(liSelected) {
liSelected.removeClass('selected');
next = liSelected.next();
if(next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected');
}
} else {
liSelected = li.eq(0).addClass('selected');
}
} else if(e.which === 38) {
if(liSelected) {
liSelected.removeClass('selected');
next = liSelected.prev();
if(next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.last().addClass('selected');
}
} else {
liSelected = li.last().addClass('selected');
}
}
});
JSFiddle:http://jsfiddle.net/Vtn5Y/
我的原生JavaScript 示例
var ul = document.getElementById('list');
var liSelected;
var index = -1;
document.addEventListener('keydown', function(event) {
var len = ul.getElementsByTagName('li').length-1;
// DOWN ARROW
if(event.which === 40) {
index++;
if (liSelected) {
removeClass(liSelected, 'selected');
next = ul.getElementsByTagName('li')[index];
if(typeof next !== undefined && index <= len) {
liSelected = next;
}
else {
index = 0;
liSelected = ul.getElementsByTagName('li')[0];
}
addClass(liSelected, 'selected');
console.log(index);
}
else {
index = 0;
liSelected = ul.getElementsByTagName('li')[0];
addClass(liSelected, 'selected');
}
}
// UP ARROW
else if (event.which === 38) {
if (liSelected) {
removeClass(liSelected, 'selected');
index--;
next = ul.getElementsByTagName('li')[index];
if(typeof next !== undefined && index >= 0) {
liSelected = next;
}
else {
index = len;
liSelected = ul.getElementsByTagName('li')[len];
}
addClass(liSelected, 'selected');
}
else {
index = 0;
liSelected = ul.getElementsByTagName('li')[len];
addClass(liSelected, 'selected');
}
}
}, false);
function removeClass(el, className) {
if(el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(new RegExp('(^|''b)' + className.split(' ').join('|') + '(''b|$)', 'gi'), ' ');
}
};
function addClass(el, className) {
if(el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
};
li.selected {background:yellow}
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
https://jsfiddle.net/m6watqpe/
2020更新
如果有人想在Vue.js中这样做,我在必要的时候添加了下面的代码和注释,其余的都是不言自明的
HTML
<script type="text/x-template" id="list">
<div id="list-container" ref="root">
<div v-for="item in items" :key="item.id" class="list-item" :class="item.id === selectedId ? 'selected': ''" @click="select(item.id)">
{{item.value}}
</div>
</div>
</script>
<div id="app">
<list></list>
</div>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
padding: 1rem;
font-family: 'Tahoma', sans-serif;
}
.list-item {
padding: 1rem 0.25rem;
}
.selected {
background: lightyellow;
}
JS
const items = new Array(100).fill(null).map((item, index) => {
return { id: index, value: "Item " + index };
});
// https://stackoverflow.com/questions/5685589/scroll-to-element-only-if-not-in-view-jquery
function scrollIntoViewIfNeeded(target) {
var rect = target.getBoundingClientRect();
if (rect.bottom > window.innerHeight) {
target.scrollIntoView(false);
}
if (rect.top < 0) {
target.scrollIntoView();
}
}
Vue.component("list", {
template: "#list",
data() {
return {
items,
selectedId: 0
};
},
methods: {
select(itemId) {
this.selectedId = itemId;
scrollIntoViewIfNeeded(this.$refs.root.children[itemId])
// this.$refs.root.children[item.id].scrollIntoView({ behavior: "smooth" });
},
handleKeyDown(event) {
switch (event.keyCode) {
// In case of left arrow key move to the last item
case 37:
if (this.selectedId > 0) {
this.select(this.selectedId - 1);
}
// Prevent the default scroll event from firing
event.preventDefault();
break;
// In case of up arrow key, move to the last item
case 38:
if (this.selectedId > 0) {
this.select(this.selectedId - 1);
}
event.preventDefault();
break;
// In case of right arrow key, move to the next item
case 39:
if (this.selectedId < this.items.length - 1) {
this.select(this.selectedId + 1);
}
event.preventDefault();
break;
// In case of down arrow key, move to the next item
case 40:
if (this.selectedId < this.items.length - 1) {
this.select(this.selectedId + 1);
}
event.preventDefault();
break;
}
}
},
mounted() {
window.addEventListener("keydown", this.handleKeyDown);
},
destroyed() {
window.removeEventListener("keydown", this.handleKeyDown);
}
});
new Vue({
el: "#app"
});
这可能取决于浏览器。它似乎只有在无线电输入相邻的情况下才能工作(标签也可以)。
<input type="radio" ... />
<input type="radio" ... />
<input type="radio" ... />
但这将破坏Firefox和其他浏览器的无线电导航:
<div><input type="radio" ... /> ... </div>
<div><input type="radio" ... /> ... </div>
只要你想让一些东西比简单的列表(类别…)更复杂,这就很烦人。
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在JavaScript中将字符串转换为函数引用
- 模糊事件的Javascript测试
- Javascript更改图标
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用WCF服务和javascript表单post上传.doc文件
- javascript结合了数组和字典
- 这是什么 ==- javascript 运算符
- 从javascript创建一个列表
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Javascript:selenium Web驱动程序isDisplayed()不工作
- Javascript、JQ数据类型冲突
- 使用箭头键浏览列表?(JavaScript/JQ)
- Javascript/JQ -确认-真/假响应
- 这段带有Javascript / jQ的PHP代码.如何
- Javascript/JQ内容删除后,一定时间(计时器)