如何在内容可编辑的DIV中找到光标位置？
如何在内容可编辑的DIV中找到光标位置？
提问于 2010-02-06 22:19:20
我正在编写一个内容可编辑的DIV自动完成程序(需要在文本框中呈现html内容)。因此，我更喜欢使用contenteditable而不是TEXTAREA)。现在，我需要在DIV中有keyup/keydown/click事件时找到光标位置。这样我就可以在该位置插入html/文本。我不知道如何通过计算找到它，或者有没有本机浏览器功能可以帮助我找到内容可编辑的DIV中的光标位置。
回答 1
Stack Overflow用户
发布于 2010-02-06 23:02:19
如果你只想在光标处插入一些内容，就不需要显式地找到它的位置。以下函数将在所有主流桌面浏览器的光标位置插入一个DOM节点(元素或文本节点)：
function insertNodeAtCursor(node) {
var range, html;
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
range.insertNode(node);
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
html = (node.nodeType == 3) ? node.data : node.outerHTML;
range.pasteHTML(html);
}
}如果希望插入HTML字符串，请执行以下操作：
function insertHtmlAtCursor(html) {
var range, node;
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(html);
range.insertNode(node);
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(html);
}
}更新
在OP的评论之后，我建议使用我自己的Rangy库，它为IE TextRange对象添加了一个包装器，其行为类似于DOM范围。DOM Range由开始边界和结束边界组成，每个边界都用节点和该节点内的偏移量表示，以及一组操作范围的方法。MDC article应该提供一些介绍。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2213376
复制相关文章
相似问题