[ Web Proxy ]
URL:
Viewing: https://javascript.info/task/keyboard-mouse [Back]  [Original]
Keyboard-driven mouse
EN

We want to make this open-source project available for people all around the world.

Help to translate the content of this tutorial to your language!

[] [] [] []
    BuyEPUB/PDF
    Search on Javascript.info:
    Search in the tutorial:
    Tutorial map
    Light themeDark theme
    DanskEnglishEspaolFranaisIndonesiaItalianoTrkeOzbek
    back to the lesson

    Keyboard-driven mouse

    importance: 4

    Focus on the mouse. Then use arrow keys to move it:

    Demo in new window

    P.S. Dont put event handlers anywhere except the #mouse element.

    P.P.S. Dont modify HTML/CSS, the approach should be generic and work with any element.

    Open a sandbox for the task.

    solution

    We can use mouse.onclick to handle the click and make the mouse moveable with position:fixed, then mouse.onkeydown to handle arrow keys.

    The only pitfall is that keydown only triggers on elements with focus. So we need to add tabindex to the element. As were forbidden to change HTML, we can use mouse.tabIndex property for that.

    P.S. We also can replace mouse.onclick with mouse.onfocus.

    Open the solution in a sandbox.

    Web Proxy Viewer  |  New URL  |  Original Page