在 HTML 文本框中扩展 JS 范围/选择答案

【问题标题】：Expanding a JS range/selection in an HTML textbox在 HTML 文本框中扩展 JS 范围/选择
【发布时间】：2013-10-03 23:14:06
【问题描述】：

给定用户在其中进行选择的文本框，我希望能够使用 JS 扩展选择（通过单词或字符）。

我知道在某些浏览器中我可以使用window.getSelection();（参见here）来获取当前选择，而在FireFox 中你可以使用selection.modify("extend", "forward", "word");，IE 中还有一个TextRange 对象supports。

这是一项要求，因为我需要检查选择并将其与之前和之后的文本进行比较（所以很明显，我会在完成后重置选择）。

我需要支持 IE9（虽然也许我可以摆脱 IE10）、Chrome 和 FF，我有 JQuery 但可以使用任何第三方 JS 库。

这篇文章很有趣，但不是很想要：Selection ranges in webkit (Safari/Chrome)

【问题讨论】：

标签： javascript html dom range selection

【解决方案1】：

Textareas 有自己的选择 API，与页面内或contenteditable 元素中的常规选择 API 不同。这很简单：一个 textarea 具有可读和可写的 selectionStart 和 selectionEnd 属性，它们分别代表 textarea 值内的选择开始和结束位置。 IE

你没有得到 Selection.modify() 的等价物，但你可能不需要它，因为它通常很容易使用 textarea 的值。

MDN：https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement

【讨论】：

【解决方案2】：

您可以通过以下方式更改活动选择：

var selection = window.getSelection();
var range = selection.getRangeAt(0);
range.setStart(range.startContainer, 0); // set to the beginning
selection.setSingleRange(range);

修改范围不会更新 UI，您必须设置范围。

【讨论】：

这看起来只会将选择设置为开始？不管它似乎不起作用：jsfiddle.net/48d2Q/6 在 Chrome 中，它会出现错误：未捕获的 IndexSizeError：索引或大小为负数，或大于允许的值。
您没有正确设置 jsFiddle。确保在您实际进行选择时运行此代码。