![](/img/trans.png)
[英]How can I make Fancybox switch to the next or previous gallery upon pressing the 'up' or 'down' arrow keys?
[英]Svelte: How can I set the focus to the previous/next element in the list item when pressing UP arrow and DOWN arrow keys?
在 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>
這里是 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.