2017-12-24 22 views
1

비디오 카드에서 onkeydown 이벤트를 실행하고 싶습니다. 하지만 그 결과는 나에게 도움이되지 않습니다. 이해하고 도와 주시면 감사하겠습니다.자바 스크립트 onkeydown 수신 태그 비디오

document.querySelector("video").onkeydown = function (e){ 
    switch(e.keyCode){ 
    case 65: 
    console.log('code 65') 
    break; 
    } 
} 

이것은 내 코드입니다.

+0

어떤 브라우저에서 사용 하시나요? KeyboardEvent 이벤트 a) 더 이상 사용되지 않고 b) 코드를 테스트중인 브라우저에 따라 다르게 처리됩니다. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode – cwanjt

+0

안녕하세요 응답을 위해. Chrome에서 작업 중입니다. 의도는 동영상 태그에 초점을두고 다른 작업을 수행하는 것입니다 ... – Clever

답변

0

문제는이 줄로 인해 console.log('code 65') break;입니다. 예기치 않은 구문이 throw됩니다.

이 데모에서는 선택 /는 tab key.Once 그 다음 선택 만 다음 keydown 이벤트가 t

document.querySelector("video").onkeydown = function(e) { 
 

 
    switch (e.keyCode) { 
 
    case 65: 
 
     console.log('code 65'); //Changed here 
 
     break;c//Changed here 
 
    } 
 
}
<video width="320" height="240" controls> 
 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
</video>

0

에 발사 될 수를 사용하여 비디오 요소에 초점을 당신, 용서 경우 가지고 있지 않음으로써 줄 바꿈을해야한다. '그러나 Cuestien은 마우스의 초점이 비디오에 있어야하며 onkeydown의 동작을 트리거해야하는 곳입니다.

0

<video> 요소를 마우스로 클릭 한 후 키보드 이벤트를 응답하려면 입력 논리를 명시 적으로 설정하여 기존 논리가 keydown 이벤트를 처리 할 수 ​​있도록해야합니다.

document.getElementById("play-video").onmousedown = function (e){ 
    console.log("focus now on video") 
    document.getElementById("play-video").focus() 
} 

그러나 시각적 <video> 요소가 선택을 나타 내기 위해 강조 될 것임을 인식하고, 사용자가 탭을 누를 경우하여 초점 것이다 <video> 요소의 선택 부분을 순환.

한 가지 가능한 솔루션은 실제 사용자가 (이벤트를 얻기 위해 우리가 초점을 맞출 경우에 대해 걱정할 필요가 없습니다, 전체 documentkeydown을 빙하는 것입니다하지만 당신은 페이지의 다른 입력 필드가있는 경우 , 추가적인 합병증을 유발할 수 있습니다)