Navega por la lista usando las teclas de flecha? (JavaScript/JQ)

Me parece que no puede encontrar una respuesta a cómo lograr esto, sin embargo, es una característica que he visto varias veces. Esencialmente estoy haciendo eco de una lista y me gustaría crear la capacidad de resaltar y seleccionar estos elementos usando las teclas de flecha/enter. ¿Alguien puede ayudarme a darme una idea de cómo puedo lograr esto? Sé cómo usar códigos de tecla (por supuesto), pero no cómo convertirlo en código funcional para seleccionar elementos en una lista ...Navega por la lista usando las teclas de flecha? (JavaScript/JQ)

Estaba pensando que tal vez tendría que tener algún tipo de botón de opción oculto para marcarlo como seleccionado o no ... pero incluso entonces no sé cómo saltaría de un botón de radio al otro arriba y abajo de la lista. Entonces, si alguien pudiera echarme una mano con esto, realmente lo agradecería. Gracias.

Fuente

2012-01-17 Ian

Dado que en realidad no explica lo que está teniendo problemas con el, acabo de crear una solución general. Esperemos que esto ayuda:

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/

Fuente

2012-01-17 23:09:14 maxedison

Bueno, eso es exactamente lo que estaba teniendo problemas con el, así que gracias. – Ian

Si el elemento no es un enlace, ¿cómo se utiliza la tecla "Enter" del teclado para seleccionar el elemento? ("seleccionada"). – ClosDesign

si (e.which === 13) {$ haga clic en(); } – Webby

Esto puede depender del navegador. Parece que funciona sólo si las entradas de radio están uno junto al otro (etiqueta también está bien).

<input type="radio" ... /> 
<input type="radio" ... /> 
<input type="radio" ... />

Pero esto va a romper radionavegación en Firefox y probablemente otros navegadores:

<div><input type="radio" ... /> ... </div> 
<div><input type="radio" ... /> ... </div>

Esto es molesto, tan pronto como usted quiere hacer algo un poco más complejo que una simple lista (categorías .. .).

Fuente

2014-01-13 15:55:28

Mi ejemplo JavaScript nativo

var ul = document.getElementById('list'); 
 
var liSelected; 
 
var index = -1; 
 

 
document.addEventListener('keydown', function(event) { 
 
var len = ul.getElementsByTagName('li').length-1; 
 
    if(event.which === 40) { 
 
index++; 
 
    //down 
 
    if (liSelected) { 
 
\t \t \t removeClass(liSelected, 'selected'); 
 
     next = ul.getElementsByTagName('li')[index]; 
 
     if(typeof next !== undefined && index <= len) { 
 
     
 
       liSelected = next; 
 
      } else { 
 
       \t index = 0; 
 
       liSelected = ul.getElementsByTagName('li')[0]; 
 
      } 
 
      addClass(liSelected, 'selected'); 
 
      console.log(index); 
 
    } 
 
    else { 
 
    index = 0; 
 
    
 
    \t liSelected = ul.getElementsByTagName('li')[0]; 
 
\t \t \t addClass(liSelected, 'selected'); 
 
    } 
 
    } 
 
    else if (event.which === 38) { 
 
    
 
    //up 
 
    if (liSelected) { 
 
\t \t \t removeClass(liSelected, 'selected'); 
 
     index--; 
 
     console.log(index); 
 
     next = ul.getElementsByTagName('li')[index]; 
 
     if(typeof next !== undefined && index >= 0) { 
 
       liSelected = next; 
 
      } else { 
 
      \t \t index = len; 
 
       liSelected = ul.getElementsByTagName('li')[len]; 
 
      } 
 
      addClass(liSelected, 'selected'); 
 
    } 
 
    else { 
 
    index = 0; 
 
    \t liSelected = ul.getElementsByTagName('li')[len]; 
 
\t \t \t 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/

Fuente

2017-08-31 15:20:09 Falselight

Navega por la lista usando las teclas de flecha? (JavaScript/JQ)

Respuesta

Cuestiones relacionadas