如何在HTML中设置自定义tabindex

119

阿明·罗斯塔米

我有一个动态的html页面，并且div.id=myComponent在此html中有一个element（），其中包含三个input元素。

在direction该的body元素rtl和div.id="myComponent"元素是ltr这样的：

<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>

当focus进入时，我需要它，div.id="myComponent"如下所示：

d => m => y

但是是相反的。

我使用该tabindex属性，但是它不能正常工作。

您如何解决此问题？

谢谢。

The_ehT

从div.id="myComponent"多方向设置中删除方向会导致问题或造成混乱。重新排列#myComponent元素。

    <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>

工作示例可以在这里找到

更新：

要设置ltr direction内部元素，请#myComponent使用以下CSS属性-
```
#myComponent > *{ 
 direction: ltr 
}  
```
为了将元素放置方向保留在'ltr'中，请使用property将span元素包装在其他元素内。更新的示例可以在这里找到divfloat:left