AddEventListener для keydown на холсте

Я пытаюсь сделать приложение canvas, которое отвечает на ввод с клавиатуры и мыши. У меня есть этот код:

canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function(event) {
    alert('mousedown');
        }, false);
canvas.addEventListener('keydown', function(event) {
    alert('keydown');
        }, false);

Предупреждение "mousedown" появляется, когда я нажимаю на мышь, но предупреждение "keydown" никогда не появляется. Тот же код отлично работает на JS Bin: http://jsbin.com/uteha3/66/

Почему он не работает на моей странице? Разве canvas не распознает ввод клавиатуры?

Ответ 1

Изменить. Этот ответ является решением, но гораздо более простой и правильный подход будет устанавливать атрибут tabindex в элементе canvas (как предложено hobberwickey).

~~Вы не можете сфокусировать элемент холста. Простая работа вокруг этого - сделать ваш "собственный" фокус.~~

var lastDownTarget, canvas;
window.onload = function() {
    canvas = document.getElementById('canvas');

    document.addEventListener('mousedown', function(event) {
        lastDownTarget = event.target;
        alert('mousedown');
    }, false);

    document.addEventListener('keydown', function(event) {
        if(lastDownTarget == canvas) {
            alert('keydown');
        }
    }, false);
}

JSFIDDLE

Ответ 2

Установите tabindex элемента canvas в 1 или что-то вроде этого

<canvas tabindex='1'></canvas>

Это старый трюк, чтобы сделать любой элемент фокусируемым

Ответ 3

инкапсулируйте весь свой js-код в функцию window.onload. У меня была похожая проблема. Все загружается асинхронно в JavaScript, поэтому некоторые части загружаются быстрее, чем другие, включая ваш браузер. Помещение всего вашего кода в функцию onload гарантирует, что весь ваш код из браузера будет готов к использованию перед попыткой выполнения.

Ответ 4

Иногда просто установка canvas tabindex на "1" (или "0") работает. Но иногда - нет, по какой-то странной причине.

В моем случае (приложение ReactJS, создание и монтирование динамического холста) мне нужно вызвать canvasEl.focus(), чтобы это исправить. Может быть, это как-то связано с React (мое старое приложение на основе KnockoutJS работает без '..focus()')