0

How to Focus Button on press top bottom left right key in HTML?

I want to write Web App.

I want to the Web App can run on smart TV and any device.

They maybe only use controller.

But, I try controller control my Web App.

The controller top bottom left rigth key cannot focus my App button.

E.g. 

<html>
<body>
<button id="b1">b1</button><button id="b2">b2</button><button id="b3">b3</button>
<br>
<button id="b4">b4</button><button id="b5">b5</button><button id="b6">b6</button>
<br>
<button id="b7">b7</button><button id="b8">b8</button><button id="b9">b9</button>
</body>
</html>

If this time focus b5 button.

I want to press "top" key it will focus b2.

I want to press "bottom" key it will focus b8.

I want to press "left" key it will focus b4.

I want to press "right" key it will focus b6.

iHad 169
  • 1,267
  • 1
  • 10
  • 16

1 Answers1

0

You must set tabindex of the button tabindex=-1 then you must call the method "focus" for the button element

example: html: <button id="myBtn" tabindex="-1">click me</button>

JavaScirpt: document.getElementById('myBtn').focus()

G.Elloumi
  • 24
  • 2