更改 innerHTML 后更改 contenteditable div 中的光标位置

Posted 2023-05-07

【中文标题】更改 innerHTML 后更改 contenteditable div 中的光标位置

【英文标题】：Change cursor position in the contenteditable div after changing innerHTML

【发布时间】：2011-04-16 21:21:24

【问题描述】：

我有一个简单的 contenteditable div，里面有一些文字。 在 onkeyup 事件中，我想根据正则表达式替换 div 的全部内容（innerhtml）。

例如，

HTML：

some text, more text and $even more text

我计划用 $ 获取所有文本（在上面的示例中为 $even）并将其包装在 span 标签中的功能：

div.onkeypress = function()  
     div.innerHTML.replace(/(some_regexp)/, "<span class='class'>$1</span>"); 
; 

问题是在这样的替换光标跳转到 div 的开头之后。我希望它保持原来的样子。

我想我必须在更改之前保存光标的坐标，然后以某种方式使用它们设置光标，但我该怎么做呢？ :)

我尝试保存范围对象，但编辑后我认为它指向任何地方。

谢谢！

【问题讨论】：

替换的 HTML 是什么样的？

我已经更新了原始问题。如果您知道如何在不更改整个 innerHTML 的情况下通过其他方式获得预期的行为 - 很高兴听到。

我知道这是一个老问题，但您是否设法找到解决方案？我也有同样的需求

【参考方案1】：

问题是您正在更新整个 innerHTML，但只有一小部分发生了变化。您不能使用正则表达式和批量替换。您需要扫描 div 并查找匹配项，从中创建文本范围并使用 span 包装内容。请参阅http://www.quirksmode.org/dom/range_intro.html，以编程方式创建范围。

但是，我认为如果光标在要替换的文本中，这将不起作用，但这是一个开始。

【讨论】：

我尝试了你的建议，但即使我使用了范围，插入符号位置也会返回到 div 的开头。

@carmina 很难判断您是否不显示您的代码。但是，如果您有问题，请将其作为新问题提出（使用您使用的代码），以便正确解决

请参阅：***.com/questions/20262798/…

【参考方案2】：

我从另一个论坛上拿了这个。它解决了我的问题。

好的，我设法解决了这个问题，如果有人感兴趣，这里是解决方案：

存储选择x，y：

代码：

cursorPos=document.selection.createRange().duplicate();
clickx = cursorPos.getBoundingClientRect().left; 
clicky = cursorPos.getBoundingClientRect().top;

恢复选择：

代码：

cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx, clicky);
cursorPos.select();

你可以在这里看到它的工作原理：

http://www.tachyon-labs.com/sharpspell/

【讨论】：

我错过了什么吗？按照链接，选择现场演示。点击单词中间，右键，选中选项，光标跳到行尾。

【参考方案3】：

您知道要替换的文本。所以你知道那个文本的位置。只有你要放置新文本。然后位置也是一样的。写新的html后，yu可以设置光标。

例如

我不明白这个问题

问题的位置是 5 我替换它

我不明白答案

使光标位置为5

http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning

http://hartshorne.ca/2006/01/23/javascript_cursor_position/

http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx