Как создать HTML-холст с фокусом клавиатуры с помощью jquery?

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

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

Ответ 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

Ответ 2

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