无法让单元格专注于内容可编辑脚本

Can't Get Cell to Focus on ContentEditable Script

本文关键字：编辑 脚本 于内容 专注 单元格      更新时间：2023-09-26

>我有一个html表格，有些列是可内容的，有些则不是。我的 HTML 包含以下文件：https://github.com/mindmup/editable-table/blob/master/mindmup-editabletable.js

如果我大声喊出：

$('#detail').editableTableWidget();

效果很好，我可以通过箭头键从一个单元格移动到另一个单元格，并且单元格在选择时突出显示，

但唯一的问题是每一列都是可内容的，我不希望这样。如果我打电话

$('#detail').editableTableWidget().find('[contenteditable]');

箭头键的移动有效，但突出显示无效，似乎不起作用。如何仅在我的内容可编辑列上调用它？

http://jsfiddle.net/2u3mhom8/是我创建的JSFiddle来显示我的问题，

谢谢你的帮助

我正在寻找相同的解决方案。我在 github 上的问题页面上发现了一些可能对您有用的内容：

https://github.com/mindmup/editable-table/issues/6

我还没有尝试过该解决方案，但它看起来很优雅，它们直接将您指向需要更改才能使其工作的代码行。

基本上，您只需使用这些：

element.find("td:not([data-editable='no'])").on('click keypress dblclick', showEditor)

和

element.find("td:not([data-editable='no'])").prop('tabindex', 1);

替换"mindmup-editabletable.js"中的相应行，这些行位于第 92 行和第 113 行（截至撰写帖子时......不确定他们是否还在同一个地方）。

我还发现了一个我目前正在我自己的项目中使用的轻微解决方法，因为它非常简单并且不需要代码来实现（尽管您可能需要使用 CSS 做更多的工作才能使单元格看起来正确）。与其用于单元格，不如使用它会使单元格不可编辑。

相关文章：