CODEWITHSUNDEEP
javascriptjquerywebkit
koko
koko

Reputation: 958

keyboard scrolling on focused div in webkit

I've got this little jquery plugin. There are some images in a vertically scrollable div. I can click on this div and scroll it by using arrow keys.

If you take a look at this example, you can see that I want observe if arrow key right/left is pressed and if so, jump to the next image. In Firefox and IE, the keyup() event is being called, and in safari and chrome it's not.

I have encountered several strange scrolling and focus behaviours in webkit browsers, but I don't know why the keyup() event is not being fired. If you have any idea, please let me know.

Upvotes: 2

Views: 4047

Answers (1)

mekwall
mekwall

Reputation: 28974

Just add the tabindex attribute to your div-element and it will work. This is kind of a hack to make an otherwise not focusable element focusable, just like any input or button.

Depending on the value given to tabindex, it will behave diffrently:

  • 0 will allow you to focus the element with the keyboard arrows and tab key
  • -1 will disable tabbing, but it will still be focusable
  • Anything greater then 0 will allow you prioratize tab focusing, where 1 has the highest priority

I've updated the jsFiddle demo accordingly.

Upvotes: 11

Related Questions