Javascript 如何在内容可编辑表中捕获键盘事件?
假设我有一个HTML表,它: 包含可编辑的单元格 划船 在“内容可编辑”单元格中,可以按键盘上的“回车”键,如果我想让用户只输入单行数据,则该键没有任何意义 我想要的是,当用户在可编辑单元格上按enter按钮时,它应该右/下聚焦到最近的可编辑单元格上,以便进行新的输入 我应该如何解决这个问题 数据1 数据2 数据3 数据4 数据5 数据6 第一台第二台 0 0 0 0 0 0 0 0 0 0 0Javascript 如何在内容可编辑表中捕获键盘事件?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,假设我有一个HTML表,它: 包含可编辑的单元格 划船 在“内容可编辑”单元格中,可以按键盘上的“回车”键,如果我想让用户只输入单行数据,则该键没有任何意义 我想要的是,当用户在可编辑单元格上按enter按钮时,它应该右/下聚焦到最近的可编辑单元格上,以便进行新的输入 我应该如何解决这个问题 数据1 数据2 数据3 数据4 数据5 数据6 第一台第二台 0 0 0 0 0 0 0 0 0 0 0 诀窍是捕捉按键,并处理回车键代码13 您可以从@filemono编辑已经提供的示例,以允许它使用e
诀窍是捕捉按键,并处理回车键代码13 您可以从@filemono编辑已经提供的示例,以允许它使用enter
(function ($) {
$.fn.enableCellNavigation = function () {
var keys = {
left: 37,
up: 38,
right: 39,
down: 40,
enter: 13
};
// select all on focus
// works for input elements, and will put focus into
// adjacent input or textarea. once in a textarea,
// however, it will not attempt to break out because
// that just seems too messy imho.
this.find('input').keydown(function (e) {
// shortcut for key other than arrow keys
if ($.inArray(e.which, [keys.left, keys.up, keys.right, keys.down, keys.enter]) < 0) {
return;
}
var input = e.target;
var td = $(e.target).closest('td');
var moveTo = null;
switch (e.which) {
case keys.left:
{
if (input.selectionStart == 0) {
moveTo = td.prev('td:has(input,textarea)');
}
break;
}
case keys.right:
{
if (input.selectionEnd == input.value.length) {
moveTo = td.next('td:has(input,textarea)');
}
break;
}
case keys.up:
case keys.enter:
case keys.down:
{
var tr = td.closest('tr');
var pos = td[0].cellIndex;
var moveToRow = null;
if (e.which == keys.down || e.which == keys.enter) {
moveToRow = tr.next('tr');
} else if (e.which == keys.up) {
moveToRow = tr.prev('tr');
}
if (moveToRow.length) {
moveTo = $(moveToRow[0].cells[pos]);
}
break;
}
}
if (moveTo && moveTo.length) {
e.preventDefault();
moveTo.find('input,textarea').each(function (i, input) {
input.focus();
input.select();
});
}
});
};
})(jQuery);
// use the plugin
$(function () {
$('#people').enableCellNavigation();
});
codepen上有多种解决方案,如使用jQuery制作的解决方案: