javascript - 在只读 div 的内容中移动插入符号，允许动态突出显示

Question

我一直在努力让一个字段正常工作。该字段显示大量数据，用户希望选择并复制其中的很大一部分。数据基本上是一个大列表，用户想要选择某个点以下的所有条目。他们实现选择的方式是在他们想要的第一个条目中突出显示一个或两个单词，然后按 ctrl+shft+end 以选择底部的所有内容。这一直有效，直到页面上的新功能被添加到列表内容下方。现在，热键选择还会选择页面其余部分的内容。

当前的实现很简单:

<div id='diff-contents'>[content here]</div>
<div id='trailing-content'>blah blah blah...</div>

我试过只读输入框:

<input id='diff-contents' value='[content here]' readonly/>

这在某种程度上适用于 Firefox，但是内容包含 HTML，并且输入字段按字面显示 html，而不是呈现。除此之外 Chrome doesn't show a blinking caret and the hot keys do nothing , 所以在这种情况下输入字段对我来说很遗憾不可行。

我如何制作一个可选择的字段来保持光标的焦点并显示闪烁的插入符号但不能使用 javascript、CSS、HTML 或 JQuery 进行编辑？

编辑:jsfiddle example that should clarify a bit.

Answer 1

看这几题如何判断当前选择:Getting selected text in a browser, cross-platform

下一步是创建一个新范围，该范围从 #diff-contents 的结束标记开始。有了这些信息，您应该能够扩展/修改现有的选择。

我建议在 UI 中添加一个按钮，或者使用带有按键处理程序的 JavaScript 来触发此代码。

这样，应该选择正确数量的 HTML。然后用户可以使用 Ctrl+C 将其复制到剪贴板。