Как мне дать холсту HTML фокус клавиатуры, используя jquery?

Question

Я реализую игру, используя Javascript, jquery и тег Canvas. Как я могу запретить браузеру обрабатывать сочетания клавиш, когда метка холста имеет фокус? Я пробовал event.stopPropagation (), и он не действует.

Я могу подобрать события клавиатуры. Однако когда пользователь нажимает пробел, веб-страница прокручивается вниз в Firefox. То же самое происходит с клавишами со стрелками.

Answer 1

Основная проблема в том, что по умолчанию браузер не делает холст «фокусируемым». Лучший способ обойти это - установить 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, вы также можете сделать холст «фокусируемым», установив для contentEditable значение true:

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

Это решение, которое я придумал изначально, но, на мой взгляд, оно немного более хакерское, чем опция tabindex.

Еще одна вещь, которую следует учитывать, заключается в том, что браузеры, как правило, выделяют редактируемые элементы содержимого рамкой. Это может отталкивать некоторых пользователей. К счастью, вы можете избавиться от этого с помощью немного CSS:

#canvas { outline: none; }

Я протестировал оба решения в Chrome 3/4/5 и FireFox 3.0 / 3.5 / 3.6 для Windows XP, Mac OSX и Linux. Вот рабочий пример: http://xavi.co/static/so-canvas-keyboard.html

Answer 2

Попробуйте event.preventDefault();. Также есть события keypress, keydown и keyup ... вы можете попробовать каждое из них, чтобы увидеть, какие из них работают.