レッスンに戻る

キーボードで制御されるマウス

importance: 4

マウスにフォーカスを当てます。次に、矢印キーを使用して移動します。

新しいウィンドウでデモ

追伸:イベントハンドラを#mouse要素以外のどこにでも配置しないでください。

追伸:HTML/CSS を変更しないでください。アプローチは汎用的で、どの要素でも機能する必要があります。

タスク用のサンドボックスを開きます。

mouse.onclickを使用してクリックを処理し、position: fixedを使用してマウスを「可動」にしてから、mouse.onkeydownを使用して矢印キーを処理できます。

唯一の問題は、keydownはフォーカスのある要素でのみトリガーされることです。そのため、要素にtabindexを追加する必要があります。HTMLを変更することは禁止されているため、これにはmouse.tabIndexプロパティを使用できます。

追伸:mouse.onclickmouse.onfocusに置き換えることもできます。

サンドボックスで解決策を開きます。