时间戳

首页 > 解决方案 > 如何在html中设置自定义tabindex

html - 如何在html中设置自定义tabindex

问题描述

我有一个动态 html 页面，我div.id=myComponent在这个 html 中有一个元素 ( )，input里面有三个元素。

的元素是direction和元素是这样的：bodyrtldiv.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属性，但它无法正常工作。

你如何解决这个问题？

谢谢。

标签： html

解决方案

您只需简单地更改您的 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>

请尝试通过 JS 脚本首先关注您的 div

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

tabindex 应该像你期望的那样工作

推荐阅读