使用箭头键在每个 td 中使用输入文本导航 HTML 表格答案

【问题标题】：Navigate HTML table with input text in every td using arrow key使用箭头键在每个 td 中使用输入文本导航 HTML 表格
【发布时间】：2017-03-20 10:37:21
【问题描述】：

我有一个HTML table，每个td 都有输入文本。我正在尝试创建一个允许箭头键导航我的td's 的函数。

我想在单击每个箭头键时突出显示所选单元格的值，就像选项卡的工作方式一样。这里有人知道如何实现这一目标吗？谢谢。

代码 Here

【问题讨论】：

我们希望您尊重在询问过程中得到的指导。
添加到你的css: input:focus { background-color: ;看起来好像对此的支持相当广泛。 developer.mozilla.org/en/docs/Web/CSS/:focus
@jeff 不。我希望文本像您点击 Tab 时一样突出显示。
将背景颜色更改为彩色 doh。
请查看我发布的示例链接。无论如何感谢您的帮助。我想要做的是，当我单击箭头键时，由输入文本组成的单元格将自动选择该值，就像 tab 键的功能一样。

标签： javascript html css asp.net html-table

【解决方案1】：

可以单独查找输入，在function rePosition()中为Active输入添加一个类，

$('#navigate tr td').find('input').removeClass('yourClassforText');
$('#navigate tr td').eq(active).find('input').addClass('yourClassforText');

// to select text inside input
$('#navigate tr td').eq(active).find('input').select();

old Demo Here

更新

正如 Op 提到的另一个问题，是只删除选定的文本。
您需要在 keydown 事件上添加一个检查，

var inp = String.fromCharCode(event.keyCode);
if (!(/[a-zA-Z0-9-_ ]/.test(inp) || event.keyCode == 96)){
    //if user is entering some text, neglect rePosition & reCalculate events
}

Updated Demo

更新 - 2：

Demo with thead

【讨论】：

但未选择/突出显示文本值。我希望它按照 Tab 键的工作方式运行。
@x'tian 你可以在 Jquery 中使用select() 来实现。答案已更新
哇。正是我要找的。谢谢！但是为什么只允许一个字符呢？每次我尝试输入一个单词时，它都会只添加一个字母。
@x'tian，你在keydown事件上写了代码，所以它清除了以前的值。需要明确分配。顺便说一句，可能是不同的问题..答案已更新！
天哪，对不起。遇到的另一个错误尝试在询问您之前解决它，但不知道如何解决。为什么每次我输入 0（零）它都会清除。

【解决方案2】：

您可以获得价值。在 re-position 函数中使用此代码：

alert($('#navigate tr td').eq(active).find('input').val());

【讨论】：

但是没有警报我该怎么做呢？我的意思是我只是想选择/突出显示文本，以便当我输入新值时它会被替换。谢谢。
不客气。这不仅适用于一个角色。它在重新定位功能起作用时显示值。这就是为什么，您看到的是现有价值，而不是新价值。在同一个单元格上尝试多个。你会看到的。
天哪，对不起。遇到的另一个错误尝试在询问您之前解决它，但不知道如何解决。为什么每次我输入 0（零）它都会清除。