Вернуться к уроку

Мышонок на "клавиатурном" приводе

важность: 4

Кликните по мышонку. Затем нажимайте клавиши со стрелками, и он будет двигаться.

Демо в новом окне

В этой задаче запрещается ставить обработчики куда-либо, кроме элемента #mouse.

Можно изменять атрибуты и классы в HTML.

Открыть песочницу для задачи.

Нам нужно ловить onclick на мышонке и в onkeydown на нём смотреть коды символов. При скан-кодах стрелок двигать мышонка через position:absolute или position:fixed.

Скан-коды для клавиш стрелок можно узнать, нажимая на них на тестовом стенде. Вот они: 37-38-39-40 (влево-вверх-вправо-вниз).

Проблема может возникнуть одна – keydown не возникает на элементе, если на нём нет фокуса.

Чтобы фокус был – нужно добавить мышонку атрибут tabindex через JS или в HTML.

Открыть решение в песочнице.