2

I have a scrollable element within a page. The arrows and home, end, page up, page down keys do not work on it until I click the element.

How can I activate those keys automatically without clicking when the mouse pointer is inside of the element and deactivate when outside?

On the element in question, I tried:

<div onmouseover="this.focus()">...</div>

but it doesn't work.

sawa
  • 165,429
  • 45
  • 277
  • 381
  • Related question: [Is it possible to focus on a div using javascript focus() function?](http://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function). – Yogi Mar 13 '16 at 18:51

1 Answers1

2

You have to define a tabindex on an element in order for it to be focusable. If you don't want it to be focusable via tabbing (only via hovering and clicking on it), this tabindex can also be negative:

<div id="scrollable" onmouseover="this.focus();" tabindex="-1">
    <!-- text -->
</div>

(JSFiddle)

More on tabindex at MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Lazzaro
  • 191
  • 2
  • 7
  • 2
    Good stuff! More info on tabindex: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex – orip Mar 13 '16 at 18:30