如何在HTML中设置自定义tabindex

Question

如何在HTML中设置自定义tabindex

我有一个动态的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>

Run Code Online (Sandbox Code Playgroud)

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

d => m => y

但是是相反的。

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

您如何解决此问题？

谢谢。

Answer 1

The*_*ehT 1

从设置多个方向中删除方向 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>

Run Code Online (Sandbox Code Playgroud)

工作示例可以在这里找到

更新：

要设置ltr direction为内部元素，#myComponent请使用以下 css 属性 -
```
#myComponent > *{ 
 direction: ltr 
}  
```
Run Code Online (Sandbox Code Playgroud)
要保留“ltr”中元素的放置方向，请使用 property将span元素包装在 other 内。更新后的示例可以在这里找到divfloat:left

归档时间：	5 年，12 月前
查看次数：	272 次
最近记录：	5 年，11 月前