js在opera下怎样获取可编辑div中的鼠标光标和选中文本

Posted 2023-04-15

一个超级疑难问题，在ie8下正常，但是在非ie浏览器下获取不到可编辑div中的鼠标光标的起始位置和结束位置。比如，我现在这里有一个可编辑的div，div中有一句文本abcdefg，现在，我选中cde三个字母，然后点击一个按钮，这样在opera浏览器上就获取不到选中的cde，而把div换文本域textarea，秒能获取。我看了一下，如果用textarea，当我按下按钮时，textarea中的内容仍然是选中状态的，而div则不是选中的。我觉得原因肯定就在这里。那么问题就是，怎么通过点击按钮或超链接获取这段在div中的选中的内容？后来发现，这样似乎无法获取 。于是我就想到可以把光标位置保存下来，插入新内容前再根据之前保存的位置，再次选中。怎样获取位置呢？

建议把div换成iframe需要改的代码也不多。div的元素级别(差不多这个意思，正确的说法不会)决定了在opera下会出现这种情况 参考技术A 楼上正解，div就是这个特性。好像没法解决。不如直接用iframe

光标在错误的地方，在contenteditable

我有令人满意的div与不可编辑的“岛屿”。一切都运行良好，直到不可编辑的部分是可编辑div中的最后一件事。在这种情况下，光标不是在不可编辑的后面，而是在可编辑div的最后。

看看我从这个question借来的这个例子

这是你可以尝试的小提琴：http://jsfiddle.net/RYsvZ/2/。当你删除末尾的点时，光标会跳开。这种行为与safari和chrome有关。我想这是webkit问题。

这是代码示例：

<div contenteditable="true" class="editor">
Sample template with <span class="mergecode" contenteditable="false">MergeCode1</span>.
</div>

你知道它为什么会发生以及如何解决它吗？

答案

&zwnj;<button contenteditable=false>press</button>&zwnj;

问题是由于插入符号没有空间可以进入，所以如果你将你的contenteditable div包装在零宽度的非连接空间中，它会让插入符号移动到某个地方。

jsfiddle

另一答案

当contenteditable = false是最后一个孩子时，会发生这种情况

元件。据我所知，这是webkit的错误。您始终确保“contenteditable = false”包含hidden_​​char或零宽度空白：

• HIDDEN_CHAR：“ ufeff”
• ZERO_WIDTH_WHITESPACE：“”

如果使用tinymce，则可以使用onNodeChange事件或检查delete / backspace何时发生并验证光标附近的所有“contenteditable = false”。