CODEWITHSUNDEEP
javascripthtmlaccessibility
Aravind
Aravind

Reputation: 79

How to set focus on list element in Javascript?

I have written my code to show some list of elements on my page. Also, I have written javascript code to slice the elements. So my page has 5 elements displaying initially and every time a user clicks show more link then an additional 5 elements get displayed. My question is when I click showmore I would like to have focus on the 6th element of the list and likewise 11th, 16th etc., Currently, I do not receive the focus on 6th element of the list.

Here is a snippet:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('ul li:gt(6)').hide();
  $('#showMore').click(function() {
    $('#payment li:hidden').slice(0, 5).css("display", "list-item");
    $('#payment li:visible:last').focus();

    // To illustrate that the last LI gets selected properly
    $('#payment li:visible:last').css({"background" : "red"}); 


  }); 
});
</script>

<title>Page Title</title>
</head>
<body>
<ul id="payment">
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
</ul>

 <li id="showMore" >
    <a href="javascript:;" >Show More</a>
  </li>  
</body>
</html>

Thanks

Upvotes: 2

Views: 16464

Answers (3)

slugolicious
slugolicious

Reputation: 17485

Maybe I'm stating the obvious, but an <li> element is not natively focusable. If you want to programmatically move the focus to an <li>, it must have tabindex='-1'.

<li tabindex='-1'>xyz</li>

Now the focus() method should work.

Upvotes: 4

NachoDawg
NachoDawg

Reputation: 1544

I did change your HTML to show the button outside the UL, but you should ofcourse alter it a bit to suit your needs, maybe define the list items that aren't the button with classes and include those in the selectors

https://jsfiddle.net/wfL61L8o/7/

HTML

<ul id="payment">
  <li>xyz 1</li>
  <li>xyz 2</li>
  <li>xyz 3</li>
  <li>xyz 4</li>
  <li>xyz 5</li>
  <li>xyz 6</li>
  <li>xyz 7</li>
  <li>xyz 8</li>
  <li>xyz 9</li>
  <li>xyz 10</li>
  <li>xyz 11</li>
  <li>xyz 12</li>
  </ul>

  <ul>
    <li id="showMore" aria-expanded="true">
      <a href="javascript:;" role="link">${text.paymentMethod.showMore}</a>
    </li>
  </ul>

JAVASCRIPT

$(function() {

  if ($('#payment li').length <= 6) {
    $('#showMore').hide();
  }

  for(var i = 0; i < $('#payment li').length; i++) {
    if(i > 5) {
        $('#payment li').eq(i).hide()
    }    
  }  

  $('#showMore').click(function() {
    $('#payment li:hidden').slice(0, 5).css("display", "list-item");
    $('#payment li:visible:last').focus();

    // To illustrate that the last LI gets selected properly
    $('#payment li:visible:last').css({"background" : "red"}); 


  }); 

});

Upvotes: 0

Marcelo Henriques Cortez
Marcelo Henriques Cortez

Reputation: 187

Well, I don't know how you are creating/populating the <li>, but using javascript to make an item focus, you would use:

document.getElementById("showMore").onclick = function focus(){
    document.getElementByClassName("li.item").focus();
}

'.item' would be a class defined to every <li> that you want (6th, 11th, etc).

To define that class, that would depend on how you are creating/populating them

Upvotes: 2

Related Questions