add tabindex attribute to a class mark dynamically

Question

I am new to angularjs. I am using a textangular to show a html document. I want to highlight some words from that html and also want to focus that word.So, I am using tabindex and class = mark to highlight and focus. So, Here At first I am adding

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

so that It will get highlighted, after that I want to add a tabindex=1 attribute to this .So that It become like

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

Here I want to add this tabindex dynamically. That means , I want to find that text and then add a tabindex to that text only.How can I achieve this ?At a time tabindex can be applied to only one word.

you want to set focus to the first instance of the word? or you want the focus to go to the word when the user presses `tab`? — Moin Zaman, Apr 03 '17 at 04:30
No Its not when user presses tab. I have an array of words which I need to highlight and focus and I have a Next button on which only that word should get highlighted and focused.It's just not for a single word. — ganesh kaspate, Apr 03 '17 at 04:33

John R · Answer 1 · 2017-04-03T05:11:24.080

0

You can try with contains() like this. Change span to a to get default href highlighter.

$("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>

edited Apr 03 '17 at 05:11

answered Apr 03 '17 at 04:40

John R

2,741
2
13
32

Hi, this one is working but It's not focusing that word. – ganesh kaspate Apr 03 '17 at 04:48
`href` is not a valid attribute on a `` – Moin Zaman Apr 03 '17 at 04:58
Hey, I have just used $("span.mark:contains("+text+")").attr("tabindex", -1).focus(); . then It starts focusing as well. – ganesh kaspate Apr 03 '17 at 04:58
@MoinZaman Yes I know but he is using `span` only right. He can customize like that or else he can use `a` for valid html markup. – John R Apr 03 '17 at 05:01
@JohnR i would not use invalid HTML as much as possible. Might cause weird issues. Also for others who see this answer might think that `href` is valid on a `` – Moin Zaman Apr 03 '17 at 05:03

score 0 · Answer 2 · answered Apr 03 '17 at 04:52

.focus() or keyboard navigating / tabindexing <span>'s is not reliable.

You need to use empty hyperlink tags, like so:

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

I have a html document so here $(".mark").is(":contains("+text+")") it is returning false. — ganesh kaspate, Apr 03 '17 at 12:58

add tabindex attribute to a class mark dynamically

2 Answers2