我可以在JavaScript中动态设置tabindex吗？

Question

是否有像tab-index这样的属性？

背景：我正在使网页表单中的某个部分可见或不可见，具体取决于我希望在特定部分可见时手动设置制表符索引的某些条件。

Answer 1

document.getElementById("link3").tabIndex = 6;

Answer 2

使用JQuery我们可以轻松动态设置标签索引 尝试此代码 - 设置tabindex并增加变量

$(function() {
    var tabindex = 1;
    $('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
});

Answer 3

动态创建并重置HTML元素的tabIndex。

tabindex属性指定HTML元素的Tab键顺序，例如“li”，“a”e.t.c的集合。所有主流浏览器都支持tabindex属性。

对于此实例，请为列表项“li”设置tabindex。通常tabindex将从'0'开始，但我们可以将其重置为从'1'开始。我正在使用Jquery来做这件事。

See It Working Here

<ul id="dfruits">
<li>Apple</li>
<li>Dragonfruit</li>
<li>Damson</li>
<li>Cloudberry</li>
<li>Blueberry</li>
<li>Cherry</li>
<li>Blackcurrant</li> 
<li>Coconut</li>
<li>Avocado</li>   
 <li>Pinaple</li>     
</ul>

$(document).ready(function() {

var 
SomeFruitsList=$("ul#dfruits li"),
//set tab index to starts from 1
tabindex = 0;   

SomeFruitsList.each(function() {
 // add tab index number to each list items
  tabindex++; 
$(this).attr("tabindex","TabIndex  " +tabindex); 

var tabIndex = $(this).attr("tabindex");
 // add tab index number to each list items as their title   
$(this).attr("title",tabIndex);

    $(this).append('<br/><em>My tabIndex is number:    '+tabIndex+'<em>')
})
    });

Answer 4

为tabindex = "-1"输入动态设置readonly

这是一个有趣的问题； CSS support is still not available越多。

以下是所有tabindex -1元素的readonly设置为input的方法：

NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;

document.querySelectorAll('input[readonly="readonly"]').forEach(x => x.tabIndex = -1);

第一行确保使用NodeList方法扩展forEach类。这是further explained here。

Answer 5

一些有用的 JS：

import { useCartContext } from "../../Context/CartContext";

const CartWidgetComponet = () => {
  const { list, totalQuantity } = useCartContext();
  return (
    <>
      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" className="bi bi-cart2" viewBox="0 0 16 16">
        <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
      </svg>
      {list.length > 0 ? (<span className="badge badge-info">{totalQuantity()}</span>) : null}
    </>
  );
};

export default CartWidgetComponet;