Jak symulować aktywację za pomocą skryptów JavaScript przy keydown?

Question

Po pierwsze, chciałbym użyć tylko natywnego JavaScript, aby wykonać to zadanie.

Załóżmy, że mam utworzyć niestandardowe menu rozwijane, a kod HTML wygląda mniej więcej tak.

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

W pliku CSS Mam coś podobnego do tego:

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

Tak, tam naprawdę nie dropdownish zachowanie, ale to nie o to chodzi dyskusji rzeczywiście. Problem polega na tym, że nie mogłem wymyślić przyzwoitego sposobu włączenia kontroli klawiatury dla tego menu. Pożądany wynik jest następujący: naciskam klawisz w dół, a pierwsza opcja jest podświetlona; Ponownie go wciskam, a druga opcja jest podświetlona i tak dalej.

Jedyną opcją, którą widzę w tym momencie (właśnie zaczęłam studiować JS) jest pobranie wszystkich dzieci ul, wstawienie do tablicy i przypisanie znaczników koloru tła za pomocą metod JS w odpowiedni sposób po naciśnięciu klawisza w dół.

Z drugiej strony nadal mam zachowanie: hover opisane w CSS dla countrol myszy. Czy istnieje inteligentny sposób symulowania zawieszania?

Answer 1

pójdę z prostego przypisania klasy na swoim Li-elementów i sterować go keyDown obsługi. Poniższy kod nie jest kompletny, ale daje ci coś, z czym możesz pracować.

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"); 
} 

Można zobaczyć working example here

Answer 2

Możesz chcieć użyć biblioteki zamiast kodować to od nowa.

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

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

Answer 3

Reality nie trzeba żadnych js dla listy rozwijanej, ale można użyć JavaScript wydarzenie do symulowania go. Można użyć zdarzenia jak najechaniu, naciskiem, onclick

w JS można użyć tej Do zdarzenia zestawu

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

w jQuery można użyć wiążą, kliknięcie,. ..

$('#id')bind('focus',function(e){ 
    //place code that want ran at event happened 
    } 

Lista wydarzeń

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

Answer 4

Proponuję usunięcie atrybutu najechania z css. I dodać tylko unosił klasę, która jest naniesiona na znakom i po najechaniu myszą

Mogłoby to wyglądać tak w Kodeksie

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"; 
}); 

Herezje przykład na JSFiddle