我正在为内容可编辑的DIV编写自动完成程序(需要在文本框中呈现html内容 . 因此首选使用可信的DIV而不是TEXTAREA) . 现在我需要在DIV中存在keyup / keydown / click事件时找到光标位置 . 这样我就可以在那个位置插入html / text . 我无法通过某种计算找到它,或者是否有本机浏览器功能可以帮助我在可疑的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库,它为IE TextRange 对象添加一个包装,其行为类似于DOM Range . DOM Range由起始和结束边界组成,每个边界用节点和该节点内的偏移量表示,以及一组用于操作Range的方法 . MDC article应该提供一些介绍 .
TextRange
1 回答
如果您只想在光标处插入一些内容,则无需明确找到其位置 . 以下函数将在所有主流桌面浏览器的光标位置插入DOM节点(元素或文本节点):
如果您想要插入HTML字符串:
UPDATE
根据OP的评论,我建议使用我自己的Rangy库,它为IE
TextRange
对象添加一个包装,其行为类似于DOM Range . DOM Range由起始和结束边界组成,每个边界用节点和该节点内的偏移量表示,以及一组用于操作Range的方法 . MDC article应该提供一些介绍 .