All geek questions in one place

Problem with HTML tabindex

I am stuck with tabindex problem. As you can see in the HTML layout, I have four buttons: Add, Subtract, Save, and Close . When the user presses the Tab key, the flow starts correctly with Add-> Subtract-> Save-> Close , but after closing, if the user presses the Tab key again, the focus switches to TD TAG with the comment "Jumping Here" . I want to do this, instead click the "Add" button. I tried to give all the buttons tabindex 1, 2, 3, 4 , then I tried to give each button an index of 1 , and the rest of the places -1 , but this also did not solve the problem. How to solve this problem?

http://jsfiddle.net/t3ch/aNxjy/

+3
source share
5 answers

Quite accurately, that is impossible. Just because you have a form with tabindex values ​​does not mean that these are the only elements that will receive focus. Even browser components, such as the address bar, will get focus at some point. The browser will use the tabindex pointer you specified, but after that the tab will go through everything else.

+4
source

I do not like this idea, but the way you could achieve this is to register an event onblurfor the Close button, and then set the focus to what ever you need ...

It works...

function resetFocusIndex(){
   var obj = document.getElementsByName('addIt');
   if(obj[0])
      obj[0].focus();
}


<INPUT TYPE="button" tabindex = "1" VALUE="Close" NAME="closeIt" onblur="resetFocusIndex()">

UPDATE

<html>
   <head>
   <script>

   function resetFocusIndex(){
      var obj = document.getElementsByName('addIt');
      if(obj){
        obj[0].focus();
      }
   }

   </script>
   </head>
   <body> 
   <TABLE WIDTH=95%>
      <TR>
        <TD><INPUT TYPE="button" tabindex = "1" id="test2" VALUE="Add" NAME="addIt"></TD>
        <TD><INPUT TYPE="button" tabindex = "1" VALUE="Subtract" NAME="minusIt"></TD>
        <TD> </TD>
      </TR>
   </TABLE>

   <DIV>
     <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1">
      <TD> </TD>
      <TD>First</TD>
      <TD>Second</TD>
      <TD>Third</TD>
      <TD>Fourth</TD>
      <TR>
    <!-- Jumping Here -->  <TD><INPUT TYPE="radio" NAME="selected" tabindex = "-1" VALUE=""></TD>     
     <TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled></TD>
     <TD ></TD>
     <TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD>
     <TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD>

       <INPUT TYPE="hidden" NAME="" VALUE="">
       <INPUT TYPE="hidden" NAME="" VALUE=""></TD>
   </TR>
  </TABLE>
</DIV>

<TABLE>
  <TR>
    <TD><A HREF="#" tabindex="-1">Click Here!</A></TD>
  </TR>
  <TR><TD>&nbsp;</TD></TR>
  <TR>
   <TD>
     <INPUT TYPE="button" tabindex = "1" VALUE="Save" NAME="saveIt">
     <INPUT TYPE="button" tabindex = "1" VALUE="Close" id="test" NAME="closeIt" onblur="resetFocusIndex()">
   </TD>
  </TR>
</TABLE>

</body>

</html>
+4
source

, .

(, input), . (, position: absolute; left: -1000px;). , .

, . .

+1

"id" , .

; , , - shif + tab .

: http://jsfiddle.net/aNxjy/11/.

jquery, js. - .

+1
source

In addition to gmcalab answer, you can use getElementById instead of getElementsByName

var obj = document.getElementById('test2');
if(obj){
    obj.focus();
}

or perhaps:

var obj = document.getElementById('test2');
if(obj){
    obj.select();
}
+1
source

Source: https://habr.com/ru/post/1773881/

More articles:


All Articles