Reputation: 2772

How to set custom tabindex in html

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.

Upvotes: 5

Answers (6)

iguypouf

Reputation: 770

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>

Upvotes: 1

Wassim Al Ahmad

Reputation: 1094

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

Upvotes: 1

Jayakumar Thangavel

Reputation: 2007

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>

Upvotes: 1

Ivan Ganchev

Reputation: 174

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.

Upvotes: 1

The_ehT

Reputation: 1230

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

Upvotes: 1

Vo Kim Nguyen

Reputation: 1633

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

Upvotes: 1

How to set custom tabindex in html

Answers (6)

Related Questions