[英]Svelte: How can I set the focus to the previous/next element in the list item when pressing UP arrow and DOWN arrow keys?
How can I set the focus to the Previous / Next element in the list item when pressing Up Arrow / Down Arrow keys in svelte?在 Svelte 中按向上箭头/向下箭头键时,如何将焦点设置到列表项中的上一个/下一个元素?
I wanted to change the focus to next list item when pressing down arrow key and also change the focus to previous list item when pressing up arrow key from the keyboard, I have started working upon some code but it's still not working properly, so it would be great if someone could help me, thanks in advance我想在按下向下箭头键时将焦点更改为下一个列表项,并在从键盘按下向上箭头键时将焦点更改为上一个列表项,我已经开始处理一些代码但它仍然无法正常工作,所以它会如果有人可以帮助我,那就太好了,在此先感谢
Code:-代码:-
<script>
let keyCode;
let item;
function handleKeydown() {
item = document.getElementsByClassName('item');
let itemLength = item.length;
keyCode = event.keyCode;
switch(keyCode){
//ArrowUp
case 38:
//when clicking up arrow focus should move upwards li elements
break;
//ArrowDown
case 40:
//when clicking down arrow focus should move downwards li elements
break;
}
}
</script>
<style>
.item:focus{
border: 1px solid #000000;
}
</style>
<svelte:window on:keydown={handleKeydown} />
<ul>
<li class="item" tabindex="0" >
<p>List Item 1</p>
</li>
<li class="item" tabindex="0" >
<p>List Item 2</p>
</li>
<li class="item" tabindex="0" >
<p>List Item 3</p>
</li>
</ul>
Here you go, explanation in comments within the code, demo REPL link at the end of the answer.这里是 go,代码中的注释中的解释,答案末尾的演示 REPL 链接。
<script>
// dereference the event object, isolating the 'keyCode' property since it's the only one needed
function handleKeydown({ keyCode }) {
// we're only interested in handling up & down arrow keys
if (keyCode !== 38 && keyCode !== 40) return
// currently focused element (if any)
const current = document.activeElement
// get our collection of list elements and turn it into an actual array
const items = [...document.getElementsByClassName('item')]
// attempt to match the currently focused element to an index in our array of list elements
const currentIndex = items.indexOf(current)
// index of the list element to be newly focused
let newIndex
// if the currently focused element was NOT a list item, then default to focusing the first item in the list (index 0)
if (currentIndex === -1) {
newIndex = 0
// otherwise, the currently focused element is an item in our list
} else {
// if the UP key has been pressed, set the new index to the current index minus 1, plus the list size, modulo the list size
if (keyCode === 38) {
newIndex = (currentIndex + items.length - 1) % items.length
// if the DOWN key has been pressed, set the new index to the current index plus 1, modulo the list size
} else {
newIndex = (currentIndex + 1) % items.length
}
}
// blur (= unfocus) the currently focused element (whether it's a list element or not)
current.blur()
// focus the list element at the computed index
items[newIndex].focus()
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.