keydown에서 Javascript로 마우스 오버를 시뮬레이트하려면 어떻게해야합니까?

Question

우선,이 작업을 완료하는 데 기본 JavaScript 만 사용하고 싶습니다.

사용자 지정 드롭 다운을 만들고 HTML 코드가 이와 비슷하게 보입니다. CSS 파일에서

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

나는이 가까이에 뭔가가 :

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

그래, 정말 더 dropdownish 행동이 없다, 그러나 실제로 논의의 핵심이 아니다. 문제는이 드롭 다운에 키보드 컨트롤을 사용할 수있는 적절한 방법을 생각할 수 없다는 것입니다. 원하는 결과는 다음과 같습니다. 아래 키를 누르면 첫 번째 옵션이 강조 표시됩니다. 다시 한 번 누르면 두 번째 옵션이 강조 표시됩니다.

이 시점에서 방금 JS를 공부하기 시작한 유일한 옵션은 ul의 하위를 모두 가져 와서 배열에 붙여 넣은 다음 적절한 방식으로 JS 메서드를 통해 태그에 배경색을 지정하는 것입니다. 아래쪽 키를 누를 때마다

한편, 마우스 카운트 롤을 위해 CSS에 설명 된 : 호버 동작이 여전히 있습니다. 수평을 시뮬레이션하는 현명한 방법이 있습니까?

Answer 1

나는 당신의 리튬 요소 클래스의 간단한 과제로 가서를 keyDown 핸들러를 조종한다. 다음 코드는 완전하지는 않지만 작업 할 수있는 것을 제공합니다.

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

당신은 working example here

Answer 2

라이브러리를 처음부터 코딩하는 대신 사용할 수 있습니다.

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

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

Answer 3

현실 당신은 드롭 다운에 대한 모든 JS 필요하지 않았다하지만 당신은 그것을 시뮬레이션 자바 스크립트 이벤트를 사용할 수 있습니다. 당신은, 당신이 바인드, 클릭을 사용할 수 있습니다 가져가, 초점, 당신은 JQuery와에 설정된 이벤트

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

를 들어이를 사용할 수 JS에서 온 클릭

같은 이벤트를 사용할 수 있습니다. ..

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

이벤트 목록

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

Answer 4

내가 CSS에서 호버 속성을 제거 제안 볼 수 있습니다. 그리고 키 누름과 마우스 오버

이 코드에서 다음과 같이 수에 적용됩니다 만 맴돌고 클래스를 추가는

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

는 Heres는 JSFiddle