logo标签列表

如何在HTML中设置自定义tabindex

html
5
我有一个动态的HTML页面，在这个页面中有一个元素(div.id=myComponent)，它包含了三个input元素。 元素的方向是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>

我需要它，在div.id="myComponent"中有focus时，如下所示：

年 => 月 => 日

但是是反向的。

我使用了tabindex属性，但它没有正确地工作。

你怎么解决这个问题？

谢谢。

你是否有理由不能仅仅重新排列myComponent中的HTML元素，而不是使用tabindex属性？使用tabindex属性被认为是一种反模式。 - Chris Zacharias
“myComponent”已经在许多地方使用。 在这种情况下，我应该重新排列所有文档中的元素。 - AminRostami
仅使用HTML和CSS？没有JavaScript？ - Mehdi Ayari
@A.R.F 请检查我的答案。我相信它已经正确运行了。 - Jayakumar Thangavel
6个回答
1
一个负值（通常是tabindex="-1"）意味着该元素不能通过顺序键盘导航到达，但可以通过JavaScript或可视化进行聚焦。这在使用JavaScript创建可访问小部件时非常有用。您可以查看下面的Tabindex Accessibility示例以消除疑惑。
当您有特定事件出现的屏幕外内容时，负值很有用。用户将无法使用键盘聚焦任何具有负tabindex的元素，但脚本可以通过调用focus（）方法来实现。
tabindex="0"表示该元素应在顺序键盘导航中成为可聚焦的，但其顺序由文档的源顺序定义。
正值表示该元素应在顺序键盘导航中成为可聚焦的，并且其顺序由数字的值定义。也就是说，tabindex="4"在tabindex="5"之前聚焦，但在tabindex="3"之后。如果多个元素共享相同的正tabindex值，则它们相对于彼此的顺序遵循它们在文档源中的位置。 tabindex的最大值为32767。如果未指定，则采用默认值0。
更多详细信息，请参见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>

亲爱的朋友，焦点不是从元素外部进入myComponent内部的。这正是我的问题所在。请仔细阅读先前的答案和评论。谢谢。 - AminRostami
@A.R.F，请仅此一次运行上述代码片段并确认。对于造成的不便，我们感到抱歉。 - Jayakumar Thangavel
哦不，我之前尝试过这个解决方案了。它是移动y=>m=>d。无论如何，还是谢谢。 - AminRostami
1

你只需要简单地更改你的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应按预期工作。
亲爱的朋友，我需要使用无需JavaScript，只使用HTML或CSS的方法。 - AminRostami
不，我的意思是，JavaScript部分只是用于测试，它允许您在按Tab键之前专注于div myComponent。 它用于适应您的前提条件“当焦点进入div.id =“myComponent”时”。 - Vo Kim Nguyen
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>

可以在这里找到一个工作示例。

更新：

  1. To set ltr direction to elements inside #myComponent use following css property - 

    #myComponent > *{ 
 direction: ltr 
}

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

我需要那个“方向”。 - AminRostami
请查看更新，如果它达到了目的。 - The_ehT
你改变了元素的位置（改变了y和d的输入）。我不能改变。它在我的许多源代码中都被使用。 - AminRostami
在所有的答案中，我知道你的答案最接近我的答案。因此我投票支持你的答案。谢谢。 - AminRostami
1

Body标签具有样式方向：rtl，而子元素#myComponent也具有相同的方向：rtl。这意味着反转和再次反转 - "ymd"（body）反转为"dmy"，(#myComponent)反转为"ymd"，这是第一顺序。需要选择要使用哪个。 以body style="direction: rtl;为例：

<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索引与此问题无关 - 如果需要，可以添加。

Body tag 的样式为 direction: rtl，而其子元素 #myComponent 的样式为 direction: ltr。 - AminRostami
很抱歉如果我浪费了时间，但这会创建所需的顺序“d => m => y”。您可以查看此链接。我会看看它是如何发生的，因为它让我感到困惑。 - Ivan Ganchev
感谢关注。我看到了你的链接。但是它从 y=>m=>d 移动，应该是 d=>m=>y。 - AminRostami
抱歉（再次）我用 #myComponent { display: flex; flex-direction: column-reverse; } 替换了 pen。我认为这是你的解决方案。 - Ivan Ganchev
亲爱的朋友，我再次看到并测试了你的代码，但它仍然无法正常工作。你有测试过你的代码吗？它应该是从“年”到“月”再到“日”。 - AminRostami
显示剩余2条评论
1

我的朋友认为这是你想要的。 如果问题没有解决，你可以留下评论。

<!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"  />
...

一个文件链接，其中包含可以在不同浏览器上尝试的代码

1
删除所有tabindex，并将日期输入框右浮以反转显示但保持DOM顺序。
<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接