Question

我希望将光标包含在span标签中的可疑div。

示例（由|表示的游标）：

之前：

The fox jumps |

后：

The fox jumps <span>|</span>

任何修改innerHTML的尝试都会导致光标移动到行尾。我希望将插入新HTML span之间。

Answer 1

由于实施问题，这不可能跨浏览器。尝试将插入符号放在WebKit和IE中的空内联元素（例如<span>）中，实际上会将插入符放在元素之前。以下内容说明了这一点：它可以满足您对Firefox的期望，而不是WebKit或IE。

http://jsfiddle.net/8TTb3/1/

您可以使用DOM Range和Selection API在插入符号位置插入元素，但IE＆lt; 9不支持这些，而是有自己的API。

代码：

var range = sel.getRangeAt(0);
var span = document.createElement("span");
range.insertNode(span);
range.setStart(span, 0);
range.setEnd(span, 0);
sel.removeAllRanges();
sel.addRange(range);

Answer 2

实际上，你可以做一个技巧：

var range = sel.getRangeAt(0);
var span = document.createElement("span");
span.innerHTML = "&#8203;";
range.insertNode(span);
range.setStart(span, 0);
range.setEnd(span, 1);
sel.removeAllRanges();
sel.addRange(range);

适用于Chrome：http://jsfiddle.net/8TTb3/8/

Answer 3

唯一可以控制的是光标在div（已经解析过的）内容中的位置。如果你在那里放一个span，它将在浏览器插入光标之前被解析，此时光标将在它之前或之后。

所以不，我不认为这是可能的。

在一个contenteditable div中的html中包含光标

3 个答案: