javascript keydown not working in chrome and firefox

Question

In a table , I simulate selected row by changing style of the row .Now I want to move this selected row by arrow keys but the keydown event is not working in Chrome and Firefox.

I do NOT want to use JQuery.

Also(if possible) because I render this table on serverside in a complicated process it is better to use inline event hanlder not attach with javascript (I mean using < tr onkeydown="myfunc(this)" > ... )

why these negetive votes? (keydown is not working on TR element in chrome and firefox). — theGhostN, Apr 27 '13 at 07:04

score 0 · Accepted Answer · answered Apr 27 '13 at 10:50

0

I don't think you should use onkeydown on the table rows. Keydown on rows only works if you have an input element inside them. otherwise they can't be focused.

Don't know if that is feasible in your case, but you could try it like this. if for whatever reason you don't want to use jQuery you'll have to modify it a bit for browsers which don't support querySelector:

document.body.addEventListener('keydown',function(ev){
    var trs = document.querySelector('.s');
    if(ev.keyCode == 38 && trs.previousSibling){
        trs.className = '';
        trs.previousSibling.className = 's';
    }else if(ev.keyCode == 40 && trs.nextSibling){
        trs.className = '';
        trs.nextSibling.className = 's';
    }
})

http://jsfiddle.net/FvgaE/

answered Apr 27 '13 at 10:50

Andy

29,707
9
41
58

You don't need to have an input element to have focus. – Neil Apr 27 '13 at 12:01
you are right Neil, but why "" is not working? – theGhostN Apr 27 '13 at 12:10
@Neil right it should work with an `a` as well. but it doesn't work on a plain `tr` – Andy Apr 27 '13 at 13:20

javascript keydown not working in chrome and firefox

1 Answers1