动态地将 tabindex 属性添加到类标记答案

【问题标题】：add tabindex attribute to a class mark dynamically动态地将 tabindex 属性添加到类标记
【发布时间】：2017-04-03 04:23:43
【问题描述】：

我是angularjs 的新手。我正在使用 textangular 来显示一个 html 文档。我想突出显示该 html 中的一些单词，也想突出显示该单词。所以，我使用 tabindex 和 class = mark 来突出显示和聚焦。所以，这里首先我要添加

<span class="mark">ABC</span>

这样它就会被突出显示，之后我想给这个添加一个tabindex=1 属性。这样它就变得像

<span class="mark" tabindex="1">ABC</span>

这里我想动态添加这个tabindex。这意味着，我想找到那个文本，然后只在那个文本中添加一个tabindex。我怎样才能做到这一点？一次 tabindex 只能应用于一个单词。

【问题讨论】：

您想将焦点设置在单词的第一个实例上吗？或者当用户按下tab 时，您希望焦点转到单词上？
否它不是当用户按下选项卡时。我有一系列需要突出显示和聚焦的单词，并且我有一个“下一步”按钮，只有那个单词应该被突出显示和聚焦。这不是一个单词。
那你就不需要tabindex了，看下面我的回答

标签： javascript jquery angularjs textangular

【解决方案1】：

.focus() 或键盘导航/tabindexing <span> 不可靠。

你需要使用空的超链接标签，像这样：

<a href="#" onCLick="return false" class="mark">ABC</a>

$("button").click(function() {
  $("a.mark:contains('ABC')").focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onCLick="return false" class="mark">ABC</a>
<a href="#" onCLick="return false" class="mark1">ABC1</a>
<button>Next</button>

【讨论】：

我有一个 html 文档，所以这里 $(".mark").is(":contains("+text+")") 它返回 false。

【解决方案2】：

您可以像这样尝试contains()。将span 更改为a 以获取默认的href 荧光笔。

$("button").click(function() {
  $("a.mark:contains('ABC')").attr("tabindex", 1);
  $("a.mark1:contains('ABC')").attr("tabindex", 2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="mark" href="#">ABC</a>
<a class="mark1" href="#">ABC</a>
<button>Next</button>

【讨论】：

嗨，这个正在工作，但它没有关注那个词。
href 不是<span> 上的有效属性
嘿，我刚用过 $("span.mark:contains("+text+")").attr("tabindex", -1).focus(); .然后它也开始聚焦。
@MoinZaman 是的，我知道，但他只使用了span。他可以这样自定义，否则他可以使用a 来获取有效的html 标记。
@JohnR 我不会尽可能使用无效的 HTML。可能会导致奇怪的问题。同样对于看到此答案的其他人，可能会认为 href 在 <span> 上有效