如何使用 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>
最佳答案
编辑上一篇文章不适用于 contenteditable 表。
这会触发焦点并向左、向右、向上和向下移动。
这是 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;
}
}
关于javascript - 在内容可编辑的表格中使用箭头键移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37137394/