Javascript 在contenteditable表格中使用箭头键移动

如何在

内容可编辑的
单元格中使用上、下、左、右键盘箭头移动
？

这在CSS中是可能的吗？这需要Javascript吗



A1A2A3A4
A1A2A3A4
A1A2A3A4
A1A2A3A4
编辑上一篇文章对contenteditable表不起作用

这会触发焦点并向左、向右、向上和向下移动

这里有一个指向JSFIDLE的链接：

var-active=0；
$（文档）.keydown（函数（e）{
重新计算（e）；
重新定位（）；
返回false；
});
$（'td'）。单击（函数（）{
active=$（this）.closest（'table'）.find（'td'）.index（this）；
重新定位（）；
});
函数重新计算（e）{
变量行=$（'#导航tr'）。长度；
var列=$（'#导航tr:eq（0）td'）。长度；
//警报（列+x+行）；
如果（e.keyCode==37）{//向左移动或换行
活动=（活动>0）？活动-1：活动；
}
如果（e.keyCode==38）{//向上移动
活动=（活动列>=0）？活动列：活动；
}
如果（e.keyCode==39）{//向右移动或换行
active=（active你需要javascript吗？你可以用它来检查按下的键是否是箭头键

在这种情况下，该方法非常有用

然后，在按下箭头键后，您必须从js导航，并将光标置于正确的
td
，并带有contendeditable

我希望这会很有用。Leo
看到这个；还有这个；谢谢！你能把它转换成JSFIDLE或可运行的代码段吗？我现在看到问题了！这在内容可编辑的表上不起作用，因为它只会沿着你正在编辑的文本移动，而不会改变在表上的位置。@Basj你来了，这应该有帮助：p
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;
    }
}