How to set custom tabindex in html

Question

I have a dynamic html page, and I have an element (div.id=myComponent) in this html, that has three input element inside.

The direction of the body element is rtl and div.id="myComponent" element is ltr like this:

<html>
<body style="direction: rtl;">
    <input type="text" />  <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
    ...
    <!-- any elements -->
    <div style="direction: ltr;" id="myComponent">
        <span> <input tabindex="3" type="text" placeholder="y" /></span>
        <span><input tabindex="2" type="text" placeholder="m" /></span>
        <span><input tabindex="1" type="text" placeholder="d" /></span>
    </div>
    <input type="text"  />
    ...
</body>

</html>

I need it, when the focus enters the div.id="myComponent", like below:

d => m => y

but is reverse.

I use the tabindex attribute, but it is not working correctly.

How do you fix this problem?

Thanks.

Is there any reason you cannot just reorder the elements in the HTML for myComponent rather than use the tabindex attribute? Use of the tabindex attribute is considered a bit of an anti-pattern. — Chris Zacharias
– Chris Zacharias, Commented Nov 7, 2019 at 5:57
the myComponent has been used in many place. in that case, I should reorder the elements in the all of documents. — AminRostami
– AminRostami, Commented Nov 7, 2019 at 6:06
@A.R.F Please check my answer. I believe it is working correctly — Jayakumar Thangavel
– Jayakumar Thangavel, Commented Nov 13, 2019 at 5:20

The_ehT · Accepted Answer · 2019-11-07 06:47:27Z

1

+50

Remove direction from div.id="myComponent" setting multiple direction will cause problem or is confusing. Rearrange the #myComponent elements.

    <body style="direction: rtl;">
        <input type="text" />  <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
        ...
        <!-- any elements -->
        <div id="myComponent" >
            <span><input type="text" placeholder="d" /></span>
            <span><input type="text" placeholder="m" /></span>
            <span><input type="text" placeholder="y" /></span>
        </div>
        <input type="text"  />
    </body>

Working example can be found at here

Update:

To set ltr direction to elements inside #myComponent use following css property -
```
#myComponent > *{ 
 direction: ltr 
}  
```
To preserve the element placing direction in 'ltr', wrap the span elements inside other div with property float:left. The updated example can be found at here

edited Nov 7, 2019 at 6:47

answered Nov 7, 2019 at 6:09

The_ehT

1,23017 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AminRostami Over a year ago

I need to that direcrion,

The_ehT Over a year ago

please look at update. If it it serves the purpose.

AminRostami Over a year ago

you changed the place of elements (changed the y and d input). I can not change. it's used a many of my source places.

AminRostami Over a year ago

Of all the answers, I know your answer is close to my answer. So I vote for your answer. Thanks

Vo Kim Nguyen · Accepted Answer · 2019-11-07 05:57:28Z

1

You just simple to change your tabindex

    <html>
<body style="direction: rtl;">
    <input type="text" />  <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
    ...
    <!-- any elements -->
    <div style="direction: ltr;" id="myComponent">
        <span> <input tabindex="1" type="text" placeholder="y" /></span>
        <span><input tabindex="2" type="text" placeholder="m" /></span>
        <span><input tabindex="3" type="text" placeholder="d" /></span>
    </div>
    <input type="text"  />
    ...
</body>

</html>

Please try to focus on your div first by JS script

document.getElementById("myComponent").focus();

And tabindex should work like you expect

answered Nov 7, 2019 at 5:57

Vo Kim Nguyen

1,65311 silver badges15 bronze badges

2 Comments

AminRostami Over a year ago

dear friend, t need to use without the javascript and ... only html or css.

Vo Kim Nguyen Over a year ago

No, I just mean, javascript part just for testing, it allow you to focus on div myComponent before you press Tab button. It use to adapt your pre-condition "when the focus enters the div.id="myComponent","

Ivan Ganchev · Accepted Answer · 2019-11-12 23:19:25Z

1

Body tag have style direction: rtl and child #myComponent have too direction: rtl. That means reverse and again reverse - "ymd" (body) reverse to "dmy" and (#myComponent ) reverse to "ymd" which is first order. Need to chose which one have to used. Example with body style="direction: rtl; only :

<body style="direction: rtl;">
    <input type="text" />  <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
      ...
    <!-- any elements -->
    <div id="myComponent">
        <span><input type="text" placeholder="y" /></span>
        <span><input type="text" placeholder="m" /></span>
       <span><input type="text" placeholder="d" /></span>
    </div>
    <input type="text"  />
      ...
</body>

Tab-indexes are not relevant to this problem - you can added if are needed.

answered Nov 12, 2019 at 23:19

Ivan Ganchev

1742 silver badges11 bronze badges

7 Comments

AminRostami Over a year ago

Body tag have style direction: rtl and child #myComponent have direction: ltr, Please read the question more carefully.

Ivan Ganchev Over a year ago

I'm sorry if I wasted time, but that creates the needed order "d => m => y". You can see this. I'll see how this happens, because it confused me.

AminRostami Over a year ago

thanks for attension. I saw your link.But is moves from y=>m=>d.that should be d=>m=>y.

Ivan Ganchev Over a year ago

Sorry (again) i changed pen with #myComponent { display: flex; flex-direction: column-reverse; } . I think that is your solution.

AminRostami Over a year ago

Dear friend, I saw and test your code again, But's it's not working. do you test your code? It's moves from y=>m=>d.

|

Jayakumar Thangavel · Accepted Answer · 2019-11-13 05:59:19Z

1

A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with Javascript or visually. It's mostly useful to create accessible widgets with JavaScript. You can observe the Tabindex Accessibility example below to clear confusion.

A negative value is useful when you have off-screen content that appears on a specific event. The user won't be able to focus any element with a negative tabindex using the keyboard, but a script can do so by calling the focus() method.

tabindex="0" means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order.

A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" is focused before tabindex="5", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source. The maximum value for tabindex is 32767. If not specified, it takes the default value 0.

For More detail https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

<html>
<body style="direction: rtl;">

</p>

    <input type="text" />  <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
    ...
    <!-- any elements -->
    <div style="direction: ltr;" tabindex="0" id="myComponent">
        <span><input tabindex="0" type="text" placeholder="y" /></span>
         <span><input tabindex="0" type="text" placeholder="m" /></span>
         <span><input tabindex="0" type="text" placeholder="d" /></span>
    </div>
 
    
    <input type="text"  />
    ...
</body>

</html>

edited Nov 13, 2019 at 5:59

answered Nov 13, 2019 at 4:51

Jayakumar Thangavel

2,0331 gold badge24 silver badges29 bronze badges

3 Comments

AminRostami Over a year ago

Dear friend, the focus does not come from out side the element to inside myComponent. and that's exactly my problem. please read the previous answer and comments more carefully. thanks.

Jayakumar Thangavel Over a year ago

@A.R.F Please run the above code snippet only this time only and confirm. Sorry for the inconvenience

AminRostami Over a year ago

oh no, I've tried this solution before.It's move y=>m=>d. thanks anyway.

Wassim Al Ahmad · Accepted Answer · 2019-11-13 19:36:15Z

1

My friend think that's what you want If the problem is not resolved you can leave a comment

<!DOCTYPE html>
<html>
<body style="direction: rtl;">
    <input type="text" />  
...
<!-- any elements -->
<div style="direction: ltr;" id="myComponent">
    <span> <input tabindex="3" type="text" placeholder="y" /></span>
    <span><input tabindex="2" type="text" placeholder="m" /></span>
    <span><input tabindex="1" type="text" placeholder="d" autofocus/></span>
</div>
<input type="text"  />
...

A file link contains the code you can try on different browsers

edited Nov 13, 2019 at 19:36

answered Nov 13, 2019 at 19:21

Wassim Al Ahmad

1,0942 gold badges7 silver badges25 bronze badges

Comments

iguypouf · Accepted Answer · 2019-11-14 01:14:15Z

1

Remove all tabindexes, and float your date inputs to right to reverse the display but keep the dom ordered.

<html>
<body style="direction: rtl;">
    <input type="text" placeholder="t1"/>  <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
    ...
    <!-- any elements -->
    <div style="direction: ltr;" id="myComponent">
        <span style="float:right"><input type="text" placeholder="d" /></span>
        <span style="float:right"><input type="text" placeholder="m" /></span>
        <span style="float:right"><input type="text" placeholder="y" /></span>
    </div>
    <input type="text" placeholder="t2" />
    ...
</body>

</html>

answered Nov 14, 2019 at 1:14

iguypouf

7704 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to set custom tabindex in html

6 Answers 6

4 Comments

2 Comments

7 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

2 Comments

7 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related