jquery를 사용하여 HTML 캔버스에 키보드 포커스를 지정하려면 어떻게해야합니까?

Question

Javascript, jquery 및 Canvas 태그를 사용하여 게임을 구현하고 있습니다. 캔버스 태그에 포커스가있을 때 브라우저가 키보드 단축키를 처리하지 못하게하려면 어떻게합니까? 내가 event.stopPropagation() 시도하고 아무런 효과가있다.

키보드 이벤트를 수신 할 수 있습니다. 그러나 사용자가 스페이스 바를 누르면 Firefox에서 웹 페이지가 아래로 스크롤됩니다. 화살표 키도 마찬가지입니다.

Answer 1

시도 event.preventDefault();. 또한 keypress, keydown 및 keyup 이벤트가 있습니다. 각 이벤트를보기 위해 시도해 볼 수 있습니다.

Answer 2

기본적으로 브라우저는 캔버스를 "포커스 가능하게"만들지 않습니다. true로 contentEditable를 설정하여 어떤 이유로 당신이 tabindex를 설정할 수없는 경우

이

$("#canvas") 
    // Add tab index to ensure the canvas retains focus 
    .attr("tabindex", "0") 
    // Mouse down override to prevent default browser controls from appearing 
    .mousedown(function(){ $(this).focus(); return false; }) 
    .keydown(function(){ /* ... game logic ... */ return false; }); 

, 당신은 또한 "포커스"캔버스를 만들 수 있습니다 : 내가 가지고 올 수있는 가장 좋은 해결 방법은 캔버스에 tabindex을 설정하는 것입니다 :

// Add content editable to help ensure the canvas retains focus 
$("#canvas").attr("contentEditable", "true") 
$("#canvas")[0].contentEditable = true; 

이것은 내가 원래 해낸 솔루션입니다,하지만 내 생각에 그것은 tabindex 옵션보다 약간 hackier입니다.

브라우저는 내용 편집 가능한 요소를 경계선으로 표시하는 경향이 있습니다. 이것은 일부 사용자에게 불쾌감을 줄 수 있습니다. 다행히, 당신은 CSS의이 비트와 함께 제거 할 수 :

#canvas { outline: none; } 

나는 윈도우 XP, 맥 OS X 및 Linux에서 크롬 3/4/5 및 파이어 폭스 3.0/3.5/3.6에서 두 솔루션을 테스트했습니다. 다음은 작동 예제입니다. http://xavi.co/static/so-canvas-keyboard.html