Verschieben mit den Pfeiltasten in einer contenteditable Tabelle

Question

Wie mit UP, AB, LINKS, RECHTS Tastatur Pfeile in den Zellen eines <table> die contenteditable bewegen?

Ist dies mit CSS möglich? Braucht man dafür Javascript?

<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 letzten Beitrag würde auf contenteditable Tabelle nicht.

Dies löst Fokus und bewegt sich nach links, rechts, oben & nach unten.

Hier ist ein Link auf die 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

Haben Sie Javascript für diese benötigen, können Sie jquery dafür verwenden und überprüfen, ob die Taste gedrückt Pfeil war.

Die keyup event ist in dieser Situation sehr nützlich.

Dann, nachdem die Pfeiltaste gedrückt wurde, müssen Sie von js navigieren und den Cursor in die richtige td mit conteneditable setzen.

Ich hoffe, es wird nützlich sein, mit freundlichen Grüßen. Leo