我正在为内容可编辑 DIV 编写一个自动完成器(需要在文本框中呈现 html 内容。因此更喜欢使用 contenteditable DIV 而不是 TEXTAREA)。现在我需要在 DIV 中有 keyup/keydown/click 事件时找到光标位置。这样我就可以在该位置插入 html/文本。我不知道如何通过某些计算找到它,或者是否有本机浏览器功能可以帮助我在可内容编辑的 DIV 中找到光标位置。
如果您只想在光标处插入一些内容,则无需显式查找其位置。以下函数将在所有主流桌面浏览器中的光标位置插入一个 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);
}
}
UPDATE
根据OP的评论,我建议使用我自己的Rangy http://code.google.com/p/rangy/库,它向 IE 添加了一个包装器TextRange
行为类似于 DOM Range 的对象。 ADOM 范围 http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html由开始和结束边界组成,每个边界都以节点和该节点内的偏移量表示,以及一系列操作 Range 的方法。这MDC 文章 https://developer.mozilla.org/En/DOM/Range应该提供一些介绍。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)