本文主要介绍了javascript中在光标处插入添加文本标签节点的详细方法。具有很好的参考价值。下面跟着小编一起来看下吧
正确的方法是正确运用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”){ cnodecnode = 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="#" rel="external nofollow" target=_blank>orange.text</a>'; orange.pastehtml(ohtml); }
以上就是详细介绍javascript中在光标处插入添加文本标签节点的方法的详细内容。