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);
}
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短