назад до уроку

Миша, керована з клавіатури

важливість: 4

Встановіть фокус на мишу. Використовуйте стрілки на клавіатурі, щоб рухати нею:

Демонстрація в новому вікні

P.S. Не додавайте обробники подій нікуди окрім елементу #mouse.

P.P.S. Не змінюйте HTML/CSS, рішення повинно бути універсальним і працювати з будь-яким елементом.

Відкрити пісочницю для завдання.

Ми можемо скористатися mouse.onclick щоб опрацювати клік та зробити мишу “рухливою” задавши їй position:fixed, а потім mouse.onkeydown щоб опрацювати натискання на стрілки клавіатури.

Єдиний недолік в тому, що keydown перемикається лише між елементами, на яких можна встановити фокус. Тому нам потрібно додати елементу tabindex. Оскільки нам заборонено змінювати HTML, ми можемо використати для цього властивість mouse.tabIndex.

P.S. Також можна замінити mouse.onclick на mouse.onfocus.

Відкрити рішення в пісочниці.