在内容可编辑的表格中使用箭头键移动

Question

How to move with UP , DOWN , LEFT , RIGHT keyboard arrows in the cells of a <table> which is contenteditable ?

Is this possible with CSS? Does one need Javascript for this?

 <table> <tr><td contenteditable>A1</td><td contenteditable>A2</td><td contenteditable>A3</td><td contenteditable>A4</td></tr> <tr><td contenteditable>A1</td><td contenteditable>A2</td><td contenteditable>A3</td><td contenteditable>A4</td></tr> <tr><td contenteditable>A1</td><td contenteditable>A2</td><td contenteditable>A3</td><td contenteditable>A4</td></tr> <tr><td contenteditable>A1</td><td contenteditable>A2</td><td contenteditable>A3</td><td contenteditable>A4</td></tr> </table> 

Answer 1

EDIT last post would not work on contenteditable table.

This triggers focus and moves left,right,up & down.

Here's a link to the jsFiddle: https://jsfiddle.net/ytfLxxes/1/

var active = 0;


$(document).keydown(function(e){
    reCalculate(e);
    rePosition();
    return false;
});

$('td').click(function(){
   active = $(this).closest('table').find('td').index(this);
   rePosition();
});


function reCalculate(e){
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    //alert(columns + 'x' + rows);

    if (e.keyCode == 37) { //move left or wrap
        active = (active>0)?active-1:active;
    }
    if (e.keyCode == 38) { // move up
        active = (active-columns>=0)?active-columns:active;
    }
    if (e.keyCode == 39) { // move right or wrap
       active = (active<(columns*rows)-1)?active+1:active;
    }
    if (e.keyCode == 40) { // move down
        active = (active+columns<=(rows*columns)-1)?active+columns:active;
    }
}

function rePosition(){
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active').trigger( "focus" );
    scrollInView();
}

function scrollInView(){
    var target = $('#navigate tr td:eq('+active+')');
    if (target.length)
    {
        var top = target.offset().top;

        $('html,body').stop().animate({scrollTop: top-100}, 400);
        return false;
    }
}

Answer 2

Do you need javascript for this, you can use jquery for that and check if the key pressed was arrow key.

The keyup event is very useful in this situation.

Then, after arrow key was pressed, you must navigate from js and put the cursor in the correct td with conteneditable.

I hope will be useful, best regards. Leo