Question

I have a lightbox-like div which appears over pages to present scrollable content. In FF, IE, and Chrome, allowing the user to scroll the lightbox with the arrow and pagedown/up keys is as simple as assigning it a tabindex and calling .focus().

In Opera, .focus() does nothing and tab/arrow/page keys will continue acting on whatever tabstop elements are in the background page.

Here’s a fiddle to illustrate the problem: http://jsfiddle.net/9W943/5/

I have seen many examples of how to focus a div, but none seem to acknowledge that the tabindex approach doesn’t work in Opera. Is there any way I can force Opera to focus the lightbox? Failing that, what’s the best workaround – listen for key events and then “manually” scroll the lightbox? (Or can I redirect the events?)

I have tried calling .click() on the lightbox, and creating+dispatching a fake click event – since keyboard scrolling works correctly after you click it – but neither worked.

Also I am very curious why it’s not standard for non-input elements to be focusable, since they can and do receive keyboard events! How do you define a focused element, if not as the element which can be interacted with via the keyboard?

Answer 1

This is a known bug (internally DSK-269802) – unfortunately there is no nice workarounds that I know of :-/

I ran into this problem yesterday myself and will give the bug a “bump” – perhaps we can fit it into some on-going development work. I’d recommend that you ignore the bug and just code as if it worked in Opera, because some day it will.