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

this javascript

Question

Parece que no puedo 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 ...

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.

Answer 1

Esto puede depender del navegador. Parece que funciona solo si las entradas de radio están una al lado de la otra (la etiqueta también está bien).

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

Pero esto romperá la navegación por radio en Firefox y probablemente en otros navegadores:

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

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

Answer 2

Como realmente no explicaste con qué estás teniendo problemas, acabo de crear una solución general. Espero que esto ayude:

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/

Answer 3

Mi ejemplo de 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) {
   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'');
    }
  }
  else if (event.which === 38) {
  
  //up
    if (liSelected) {
   removeClass(liSelected, ''selected'');
      index--;
      console.log(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/