正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。
思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的选区)。然后,从Selection对象转成Range对象。目的是利用Range对象的方法插内容进去。最后,插入动作结束后将光标移到插入内容的后面。
var sel = win.document.selection; //IE
var sel = win.getSelection(); //DOM
var range = sel.createRange(); // IE下
var range = sel.getRangeAt(0); // DOM下
if(range.startContainer){ // DOM下
sel.removeAllRanges(); // 删除Selection中的所有Range
range.deleteContents(); // 清除Range中的内容
// 获得Range中的第一个html结点
var container = range.startContainer;
// 获得Range起点的位移
var pos = range.startOffset;
// 建一个空Range
range = document.createRange();
// 插入内容
var cons = win.document.createTextNode(",:),");
if(container.nodeType == 3){// 如是一个TextNode
container.insertData(pos, cons.nodeValue);
// 改变光标位置
range.setEnd(container, pos + cons.nodeValue.length);
range.setStart(container, pos + cons.nodeValue.length);
}else{// 如果是一个HTML Node
var afternode = container.childNodes[pos];
container.insertBefore(cons, afternode);
range.setEnd(cons, cons.nodeValue.length);
range.setStart(cons, cons.nodeValue.length);
}
sel.addRange(range);
}else{// IE下
var cnode = range.parentElement();
while(cnode.tagName.toLowerCase() != “body”){
cnode = cnode.parentNode;
}
if(cnode.id && cnode.id==”rich_txt_editor”){
range.pasteHTML(",:),");
}
}
win.focus();
innerHTML 和 pasteHTML 区别
innerHTML 是一个属性,可以取得或者设定该元素内的 HTML 内容,可以是任意能包含 HTML 子节点的元素都使用它
pasteHTML()是一个方法,在指定的文字区域内替换该区域内的文本或者HTML,该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上
var oRange = document.selection.createRange();
if(oRange.text!=''){
var oHtml = '<a href="#" target=_blank>oRange.text</a>';
oRange.pasteHTML(oHtml);
}
分享到:
相关推荐
本文主要介绍了JavaScript中在光标处插入添加文本标签节点的详细方法。具有很好的参考价值。下面跟着小编一起来看下吧
通过javascript在光标处插入文本.doc
javascript 在光标处插入指定内容
javascript实现 在光标处插入指定内容
javascript在一段文字中的光标处插入其他文字
JavaScript 实现在树形菜单中添加、删除节点实例 js note JavaScript实现在树形菜单中添加、删除节点实例,本程序侧重于学习,主要介绍一种在多级树节点中创建节点、删除节点,帮助了解树形菜单创作原理。
使用javascript控制在光标位置插入文字,在实现表情的插入时会用到的,需要的朋友可以参考下
我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式、内容属性等。 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法.
本实例使用Javascript实现在textarea光标处插入文本,支持多种浏览器
javascript 节点的属性和方法参考
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下: JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore...
javascript 节点 描述 入门教程 入门指导
javascript获得光标所在的文本框(text textarea)中的位置.docx
主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下
主要介绍了JS简单添加元素新节点的方法,结合实例形式分析了javascript针对页面元素节点的创建、添加、克隆等相关操作技巧,需要的朋友可以参考下
javascript获取指定节点父节点、子节点的方法.pdf