Is it possible to focus on a div using JavaScript focus function

Question

Is it possible to focus on a  lt div gt  using JavaScript focus   function   I have a  lt div gt  tag   lt div id  tries  gt You have 3 tries left lt  div gt    I am trying to focus on the above  lt div gt  using    document getElementById  tries   focus      But it doesn t work  Could someone suggest something

User · Answer

Yes - this is possible  In order to do it  you need to assign a tabindex      lt div tabindex  0  gt Hello World lt  div gt    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 can also give a tabindex of -1  which will make the div only focus-able by script  not the user    x000D   x000D  document getElementById  test   onclick   function      x000D      document getElementById  scripted   focus    x000D     x000D  div focus   x000D      background-color  Aqua  x000D    x000D   lt div gt Element X  not focusable  lt  div gt  x000D   lt div tabindex  0  gt Element Y  user or script focusable  lt  div gt  x000D   lt div tabindex  -1  id  scripted  gt Element Z  script-only focusable  lt  div gt  x000D   lt div id  test  gt Set Focus To Element Z lt  div gt  x000D   x000D   x000D    Obviously  it is a shame to have an element you can focus by script that you can t focus by other input method  especially if a user is keyboard only or similarly constrained   There are also a whole bunch of standard elements that are focusable by default and have semantic information baked in to assist users  Use this knowledge wisely

User · Answer

To make the border flash you can do this   function focusTries         document getElementById  tries   style border    solid 1px  ff0000       setTimeout   clearBorder    1000       function clearBorder         document getElementById  tries   style border           This will make the border solid red for 1 second then remove it again

User · Answer

document getElementById  tries   scrollIntoView   works  This works better than window location hash  when you have fixed positioning

User · Answer

lt div id  inner  tabindex  0  gt      this div can now have focus and receive keyboard events  lt  div gt

User · Answer

x000D   x000D  document getElementById  test   onclick   function      x000D      document getElementById  scripted   focus    x000D     x000D  div focus   x000D      background-color  Aqua  x000D    x000D   lt div gt Element X  not focusable  lt  div gt  x000D   lt div tabindex  0  gt Element Y  user or script focusable  lt  div gt  x000D   lt div tabindex  -1  id  scripted  gt Element Z  script-only focusable  lt  div gt  x000D   lt div id  test  gt Set Focus To Element Z lt  div gt  x000D   x000D   x000D

User · Answer

I wanted to suggest something like Michael Shimmin s but without hardcoding things like the element  or the CSS that is applied to it    I m only using jQuery for add remove class  if you don t want to use jquery  you just need a replacement for add removeClass  --Javascript  function highlight el  durationMs       el     el     el addClass  highlighted      setTimeout function         el removeClass  highlighted        durationMs    1000      highlight document getElementById  tries       --CSS   tries       border  1px solid gray      tries highlighted       border  3px solid red

User · Answer

You can use tabindex   lt div tabindex  -1   id  tries  gt  lt  div gt    The tabindex value can allow for some interesting behaviour    If given a value of  -1   the element can t be tabbed to but focus can be given to the element programmatically  using element focus     If given a value of 0  the element can be focused via the keyboard and falls into the tabbing flow of the document  Values greater than 0 create a priority level with 1 being the most important

User · Answer

window location hash     tries     This will scroll to the element in question  essentially  focus ing it

[javascript] Is it possible to focus on a <div> using JavaScript focus() function?

Examples related to javascript

Examples related to focus