How to add-class and focus the children on keydown function

Question

MARKUP

<ul class="focus">
    <li class="active"><a>Text 1</a></li>
    <li><a>Text 2</a></li>
    <li><a>Text 3</a></li>
    <li><a>Text 4</a></li>
    <li><a>Text 5</a></li>
    <li><a>Text 6</a></li>
    <li><a>Text 7</a></li>
    <li><a>Text 8</a></li>
    <li><a>Text 9</a></li>
    <li><a>Text 10</a></li>
    <li><a>Text 11</a></li>
    <li><a>Text 12</a></li>
</ul>

CSS

.focus{
    height:60px;
    list-style-type:none;
    overflow:auto;
}
.focus li a {
}
.focus li.active{
    background:#f6f6f6;
}

JQUERY

$( ".focus" ).keydown(function() {
  if (  KeyCode == 40 ) {
      $(this).next(li).addClass('active').children(a).focus();
});

For the this markup i need to add a class active to the children li when a down arrow is pressed and the active li needs to get focused. I dont how to break the codes further can anyone explain. Thanks in advance.

DEMO

SW4 · Accepted Answer · 2014-08-04T08:50:27.190

3

Demo Fiddle

You should add a tabindex to the ul (<ul class="focus" tabindex='0'>), and href attributes to the a, then use the following:

$(".focus").keydown(function (e) {
    if (e.keyCode == 40) {    
        $('.active').removeClass('active').next('li').addClass('active').children('a').focus();
    }
});

To remove the outline (Chrome) on the ul when it has focus, you can use the CSS:

.focus:focus, .focus:active{
   outline:none;
}

Adding a tabindex allows the ul to be selectable and key events to be registered. Note you also want to enclose your selectors with speech marks.

Extended Demo

You can use the below to also scroll up down/loop through all items:

$(".focus").keydown(function (e) {
    if (e.which == 40) {
        var next = $('.active').removeClass('active').next('li');
        next = next.length > 0 ? next : $('.focus li:eq(0)');
        next.addClass('active').children('a').focus();
    } else if (e.which == 38) {
        var prev = $('.active').removeClass('active').prev('li');
        prev = prev.length > 0 ? prev : $('.focus li').last();
        prev.addClass('active').children('a').focus();
    }
});

edited Aug 04 '14 at 08:50

answered Aug 04 '14 at 08:40

SW4

69,876
20
132
137

this one works fine and the one hard thing is when it reaches the last li and the down arrow pressed i could retain my focusin elements – Benjamin Aug 04 '14 at 08:52
@Benjamin - see the second example in the answer – SW4 Aug 04 '14 at 08:55
Im new to jquery could u tell me why we use ? (symbol) in the middle of something. – Benjamin Aug 04 '14 at 09:07
@Benjamin - see: http://stackoverflow.com/questions/9864634/shorthand-if-else-statement-javascript – SW4 Aug 04 '14 at 09:11
@SW4 while fiddling around, I made your code shorter.. [Fiddle](http://jsfiddle.net/4hd7w/11/) – Mr_Green Aug 04 '14 at 09:12
@SW4 yup.. updated again.. could be made more short I think.. [**Updated Fiddle**](http://jsfiddle.net/4hd7w/12/) :) – Mr_Green Aug 04 '14 at 09:15
hi i need to implement this code in this fiddle will u able to help me http://jsfiddle.net/c9U3s/2/ – Benjamin Aug 04 '14 at 10:56

score 2 · Answer 2 · answered Aug 04 '14 at 08:37

ul elements aren't interactive. This means that the keydown event will never fire on it. Your a elements are, however, so what you can do is assign your keydown event to your a elements instead.

Firstly you'll need to give your a elements a href attribute to make them interactive:

<li>
    <a href="#">Text 2</a>
</li>

Then modify your jQuery:

$('.focus').find('a').keydown(function(event) {
    if (event.which == 40)
        $(this).parent().next('li').addClass('active').children('a').focus();
});

Also you should use event.which instead of KeyCode as jQuery normalises this to work across all browsers: http://api.jquery.com/event.which/

JSFiddle demo.

score 0 · Answer 3 · answered Aug 04 '14 at 08:39

0

have a look at the jQuery events documentation especially "event.which" http://api.jquery.com/event.which/

answered Aug 04 '14 at 08:39

Jan Wiemers

341
1
6

score 0 · Answer 4 · answered Aug 04 '14 at 08:47

0

try this :

var x=1;
$(document).keypress(function(e) {
  var code = e.keyCode || e.which;
  if ( code == 40 ) {
      $(".focus").children("li").removeClass('active');
      x++;
      if(x>  $(".focus li").length)
          x=1;
      $(".focus li:nth-child("+x+")").addClass('active');
  }
});

DEMO

answered Aug 04 '14 at 08:47

Youness

1,468
1
9
19

Are you sure this one works I don't think this one works even in the fiddle – Benjamin Aug 04 '14 at 08:59
yes, i just went to fiddle i found that it works why it didnt for you ? – Youness Aug 04 '14 at 09:01
Guess what trying it again and check whether it add the class active to the li it definitely not – Benjamin Aug 04 '14 at 09:07
here http://jsfiddle.net/56CB4/1/ see for your self btw im using firefox and it works fine for me O.o – Youness Aug 04 '14 at 09:10
dude this is really hard to believe it doesn't work . Check out the background color when li add class with action it should have the background value #f6f6f6 – Benjamin Aug 04 '14 at 09:12
can you be more clear ? what (symbol) you mean ? $(document) ?? give me an example so i can help you :) – Youness Aug 04 '14 at 09:13
btw i just found out it dont work in chrome it might be only working in firefox – Youness Aug 04 '14 at 09:14
that what im talking abt i use chrome all the time can u able to fix that one – Benjamin Aug 04 '14 at 09:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58598/discussion-between-benjamin-and-youness). – Benjamin Aug 04 '14 at 09:20

How to add-class and focus the children on keydown function

4 Answers4

Demo Fiddle

Extended Demo