Svelte：如何在按向上箭头和向下箭头键时将焦点设置到列表项中的 previous/next 元素？

Question

如何在按 向上箭头时将焦点设置到列表项中的 Previous/Next 元素/Svelte 中的向下箭头 键？

我想在按下箭头键时将焦点更改到下一个列表项，并在从键盘上按向上箭头键时将焦点更改到上一个列表项，我已经开始处理一些代码，但它仍然无法正常工作正确，所以如果有人能帮助我，那就太好了，在此先感谢

代码:-

<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>

Answer 1

给你，代码内注释解释，答案末尾演示REPLlink

<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>

Demo REPL

Svelte：如何在按向上箭头和向下箭头键时将焦点设置到列表项中的 previous/next 元素？

Svelte: How can I set the focus to the previous/next element in the list item when pressing UP arrow and DOWN arrow keys?

javascript

focus

keypress

listitem

svelte