How would I use javascript or jquery to "focus" on a div?

Question

By focus, I don't just mean scroll to that section of the page. Is there a way to make the browser behave as if the user had clicked on that div? The use case here is that I want a user to be able to scroll in a div using the arrow keys, but the div appears on the click of another button which does not click the div itself, so attempting to scroll with the arrow keys does nothing since the main page is not scrollable and is "focused" by default. Obviously the .focus function does not work on divs so I am wondering how to do this!

This is NOT the same question as the one that it was marked as a duplicate of. There are links to similar questions in the answers to this one but currently this is marked as a duplicate of the wrong question

Your note that it's not a duplicate is incorrect as you've accepted an answer that is literally a copy of an answer in that question (even with a link). — freedomn-m, Nov 07 '18 at 08:54

score 1 · Accepted Answer · answered Nov 07 '18 at 07:16

1

You just have to add a tabindex attribute with value of -1 to the <div> according to this answer and it will work with the below code:

$('div').attr("tabindex", -1).focus();

answered Nov 07 '18 at 07:16

Jack Bashford

43,180
11
50
79

Instead of copying the exact code from some other answer, it would be much better to VTC as duplicate. – CertainPerformance Nov 07 '18 at 07:22
@CertainPerformance Sorry, what's VTC? – Jack Bashford Nov 07 '18 at 07:22
- Vote to close – CertainPerformance Nov 07 '18 at 07:23
@CertainPerformance Oh, right - I'm < 3k rep - don't know much about it. Thanks for clarification – Jack Bashford Nov 07 '18 at 07:24
This worked great, thank you. What is the tabindex attribute for? – Julian Tennyson Nov 07 '18 at 07:28
For focusing on the div correctly. It's complex. – Jack Bashford Nov 07 '18 at 07:29

How would I use javascript or jquery to "focus" on a div?

1 Answers1