Question

如何移动 UP ， DOWN ， LEFT ， RIGHT 单元格中的键盘箭头一个<table>是contenteditable？

CSS可以实现吗？是否需要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

编辑上一篇文章不适用于contenteditable table。

这会触发焦点并向左，向右，向上和向左移动下来。

这是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

你需要javascript，你可以使用jquery并检查按下的键是否为箭头键。

keyup event在这种情况下非常有用。

然后，在按下箭头键后，您必须从js导航并将光标放在具有可争议的正确td中。

我希望有用，最好的问候。利奥

在contenteditable表中使用箭头键移动

2 个答案: