Come si simula il passaggio del mouse con Javascript su keydown?

Question

Prima di tutto, vorrei utilizzare solo JavaScript nativo per completare questa attività.

Diciamo che devo creare un menu a discesa personalizzato e il codice HTML è simile a questo.

<div class="dropdown"> 
    <span class="dropdown-label" style="display:block">Select a thing</span> 
    <ul class="dropdownItemContainer"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    </ul> 
</div> 

Nel file CSS ho qualcosa vicino a questo:

ul.dropdownItemContainer li:hover { 
    background-color: #FF0000; 
} 

Sì, non c'è davvero nessun comportamento dropdownish, ma non è questo il punto di discussione in realtà. Il problema è che non riuscivo a pensare a un modo decente per abilitare il controllo da tastiera per questo menu a discesa. Il risultato desiderato è il seguente: premo il tasto giù, e la prima opzione è evidenziata; Lo premo di nuovo, e la seconda opzione è evidenziata e così via.

L'unica opzione che vedo a questo punto (appena iniziato a studiare JS) è di recuperare tutti i figli di ul, incollarli in un array e assegnare i tag a un colore di sfondo tramite i metodi JS in modo corretto ogni volta che si preme il tasto giù.

D'altra parte, ho ancora il comportamento di hover descritto nel CSS per il countrol del mouse. C'è un modo intelligente di simulare alghe?

Answer 1

vorrei andare con una semplice assegnazione di una classe sulle vostre li-elementi e guidare con un gestore keydown. Il seguente codice non è pensato per essere completo ma ti fornisce qualcosa su cui puoi lavorare.

var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li"); 

document.addEventListener("keydown",handler); 
document.addEventListener("mouseover",handler); 

function handler(e){ 
    console.log(e.which); 
     active.classList.remove("hover"); 
    if (e.which == 40){ 
     active = active.nextElementSibling || active; 
    }else if (e.which == 38){  
     active = active.previousElementSibling || active; 
    }else{ 
     active = e.target; 
    } 
     active.classList.add("hover"); 
} 

Si può vedere un working example here

Answer 2

È possibile utilizzare una libreria anziché codificarla da zero.

http://vebersol.net/demos/jquery-custom-forms/

http://www.dreamcss.com/2009/05/15-jquery-plugins-to-enhance-your-html.html

Answer 3

realtà non hai bisogno di qualsiasi js per discesa, ma è possibile utilizzare JavaScript eventi per la simulazione. È possibile utilizzare evento come hover, attenzione, onclick

In JS è possibile utilizzare questo per Set evento

document.getElementById('id').addEventListener('focus',function(e){ 
    //place code that want ran at event happened 
    } 

in jQuery è possibile utilizzare legano, click,. ..

Elenco degli eventi

http://www.quirksmode.org/dom/events/index.html

Answer 4

vorrei suggerire di rimuovere l'attributo hover da CSS. E solo aggiungere una classe è passato il mouse che viene applicato sulla pressione dei tasti e al passaggio del mouse

Questo potrebbe assomigliare a questo nel codice

var dropDown = document.getElementsByClassName("dropdownItemContainer")[0] 

document.addEventListener("keydown",function (e) { 
    if(e.keyCode == 38 || e.keyCode == 40) { 
     var key = e.keyCode 
     var hovered = dropDown.getElementsByClassName("hovered") 
     if(hovered.length != 0) { 
      cur = hovered[0] 
      cur.className = "" 
      cur = cur[(key==38?"previous":"next")+"ElementSibling"] || dropDown.children[key==38?dropDown.children.length-1:0] 
     } else { 
      cur = dropDown.children[key==38?dropDown.children.length-1:0] 
     } 
     cur.className="hovered" 
    } 
}); 


dropDown.addEventListener("mouseover",function (e) { 
    for(var i = 0,j; j = dropDown.getElementsByClassName("hovered")[i];i++) 
     j.className = ""; 
    e.srcElement.className = "hovered"; 
}); 

Ecco un esempio su JSFiddle