//在光标位置插入内容
export const insertContent = content => {
if (!content) {
//如果插入的内容为空则返回
return
}
let sel = null
if (document.selection) {
//IE9以下
sel = document.selection
sel.createRange().pasteHTML(content)
} else {
sel = window.getSelection()
if (sel.rangeCount > 0) {
let range = sel.getRangeAt(0) //获取选择范围
range.deleteContents() //删除选中的内容
let el = document.createElement('div') //创建一个空的div外壳
el.innerHTML = content //设置div内容为我们想要插入的内容。
let frag = document.createDocumentFragment() //创建一个空白的文档片段,便于之后插入dom树
let node = el.firstChild
let lastNode = frag.appendChild(node)
range.insertNode(frag) //设置选择范围的内容为插入的内容
let contentRange = range.cloneRange() //克隆选区
contentRange.setStartAfter(lastNode) //设置光标位置为插入内容的末尾
contentRange.collapse(true) //移动光标位置到末尾
sel.removeAllRanges() //移出所有选区
sel.addRange(contentRange) //添加修改后的选区
}
}
}
封装在光标位置插入文本内容
最新推荐文章于 2026-04-15 10:55:43 发布
该代码段展示了在不同浏览器环境下,如何利用JavaScript实现向文档中插入内容并设置光标位置的功能。针对IE9以下和现代浏览器,分别采用不同的处理方式,涉及document.selection和window.getSelection() API。

9627

被折叠的 条评论
为什么被折叠?



