Menu
I have a script that shows a popup, and fairly often, the content is taller than the window and requires scrolling. The popup box is within a container div that has an overflow so the popup can be scrolled around without interfering with the scroll position on the rest of the page.
The issue is that when the popup box is displayed, when the up and down arrows are pressed, nothing happens as the popup box in the holder is not focused. Only when I click on an element within the container, then the arrows start working. Is it possible to perform a similar function to the 'click on an element' method described before, except in javascript. I tried .focus and other similar commands, but none worked.
796
Yes - this is possible. In order to do it, you need to assign a tabindex... A tabindex of 0 will put the tag "in the natural tab order of the page". A higher number will give it a specific order of priority, where 1 will be the first, 2 second and so on.
You cannot normally focus li elements. But you can hover them, so you should use li:hover instead of li li:focus .
Use the blur() method to remove the focus from an element, e.g. input. blur() . If you need to remove the focus from the currently active element without selecting it, call the blur method on the activeElement property - document.
Aha, sorted it. Set the holder's tabIndex to -1 and then .focus() worked on selecting it
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
