CODEWITHSUNDEEP
jqueryhtmlcss
John Smith
John Smith

Reputation: 6269

Focus is not working for me

I have a very basic code:

$(document).on("keydown", function(e){
    if(e.keyCode == 40){ //down arrow
        $('tbody').first('tr').focus();

    }else if(e.keyCode == 38){ //up arrow

    }
});

You can see that I check whether the up or down key is pressed. And if the down arrow is pressed the first tr in the tbody should be focused by Jquery. Which means this style should be added:

tr:focus{
  background-color: #f5f5f5;
}

But somehow it doesn't work! Could you please revise it and give me a solution? Thanks

Fiddle: http://jsfiddle.net/hye78/2/

Upvotes: 1

Views: 829

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206565

LIVE DEMO

tabindex is here for us, than in jQ you can use a counter to focus your TR in a loop

  <table>
    <tbody>
      <tr tabindex="0"><td>TD1</td></tr>
      <tr tabindex="0"><td>TD2</td></tr>
      <tr tabindex="0"><td>TD3</td></tr>
    </tbody>
  </table>

jQ:

var $tr = $('tr');     //cache your selectors!
var c = 0;             //current/counter
var n = $tr.length;    //num of TR elements

// here instead of /document/ use rather a static element ID selector
$(document).on("keydown", function(e){

  var k = e.which;
  if(k==40){           // DOWN
    ++c;
  }else if(k===38){    // UP
    --c;
  }
  c %= n;              // Loop counter
  $tr.eq(c).focus();   // Focus on current using .eq() method

});

Upvotes: 1

Suraj Rawat
Suraj Rawat

Reputation: 3763

here is solution : click here for live example

jquery 

 $(document).on("keydown", function(e){
    if(e.keyCode == 40){ //down arrow
        $('tbody tr:nth-child(1)').addClass('highlight');
    }
});

css

.highlight{
  background-color: #f5f5f5;
    }

Upvotes: 0

Jason Aller
Jason Aller

Reputation: 3652

<tr> can't accept focus by default. Focus is limited to form elements and links unless you've set tabindex for the element.

http://jsfiddle.net/hye78/7/

Upvotes: 0

putvande
putvande

Reputation: 15213

You could add tabindex="1" to your tr and change your JS code a bit:

Have

 $('tbody tr:first').focus();

instead of 

  $('tbody').first('tr').focus();

Fiddle

Upvotes: 2

Alvaro
Alvaro

Reputation: 41605

I believe you want to do something like this:

Living example

There's no focus state for the row, but you can replace it for a class. I've chosen the class active for it.

Also, the background should be applied to the td element, not the the tr.

tr.active td {
    background-color: #f5f5f5;
}

This is the jQuery I used:

$(document).on("keydown", function (e) {
    var activeRow;
    if (e.keyCode == 40) { //down arrow
        if (!$('tbody').find('tr.active').length) {
            activeRow = $('tbody').find('tr').first();
        } else {
            activeRow = $('tbody').find('tr.active').next();
        }

    }else if (e.keyCode == 38) { //up arrow
         activeRow = $('tbody').find('tr.active').prev();
    }

    activeRow.addClass('active').siblings().removeClass('active');

});

Upvotes: 4

Related Questions