div设置contentEditable="true"作为文本编辑器，定位光标解决办法

最新推荐文章于 2025-06-16 11:56:32 发布

JAVA服务端研发知识图谱

最新推荐文章于 2025-06-16 11:56:32 发布

阅读量2w

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html cursor selectio

本文链接：https://blog.csdn.net/chiwenheng2078/article/details/48158215

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在DIV元素中精确定位光标的方法，尤其是在插入表情或图片后保持光标位置不变的技术细节。该方法兼容IE和其他主流浏览器，并提供了一个实用的JavaScript函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

比如你会在div中插入表情，也可能输入文字，这时候，你可能需要定位光标的位置，默认不处理的情况下，div的光标是定位在文字后面，而你插入一个img标签，光标是不会跟随移动的！解决办法：

function set_focus(el)
{
el=el[0];  // jquery 对象转dom对象
el.focus();
if($.browser.msie)
{
var rng;
el.focus();
rng = document.selection.createRange();
rng.moveStart('character', -el.innerText.length);
var text = rng.text;
for (var i = 0; i < el.innerText.length; i++) {
if (el.innerText.substring(0, i + 1) == text.substring(text.length - i - 1, text.length)) {
result = i + 1;
}
}
    }
else
{
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
    }
}

了解更多：https://developer.mozilla.org/en-US/docs/Web/API/Selection

http://www.css88.com/demo/edit-box/index1.html