JavaScript中在光标处插入添加文本标签节点的详细方法
正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。
思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的选区)。然后,从Selection对象转成Range对象。目的是利用Range对象的方法插内容进去。最后,插入动作结束后将光标移到插入内容的后面。
varsel=win.document.selection;//IE varsel=win.getSelection();//DOM varrange=sel.createRange();//IE下 varrange=sel.getRangeAt(0);//DOM下 if(range.startContainer){//DOM下 sel.removeAllRanges();//删除Selection中的所有Range range.deleteContents();//清除Range中的内容 //获得Range中的第一个html结点 varcontainer=range.startContainer; //获得Range起点的位移 varpos=range.startOffset; //建一个空Range range=document.createRange(); //插入内容 varcons=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{//如果是一个HTMLNode varafternode=container.childNodes[pos]; container.insertBefore(cons,afternode); range.setEnd(cons,cons.nodeValue.length); range.setStart(cons,cons.nodeValue.length); } sel.addRange(range); }else{//IE下 varcnode=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()创建的区域上
varoRange=document.selection.createRange(); if(oRange.text!=''){ varoHtml='oRange.text'; oRange.pasteHTML(oHtml); }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!