JavaScript中在光标处插入添加文本标签节点的详细方法

 更新时间:2017年03月22日 17:09:00   作者:soul丶强  
本文主要介绍了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); 
 } 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • 仿淘宝TAB切换搜索框搜索切换的相关内容

    仿淘宝TAB切换搜索框搜索切换的相关内容

    这是一款仿淘宝TAB切换搜索框,想搜索哪方面的内容就切换到哪一个,非常实用,喜欢的朋友可以看看
    2014-09-09
  • JavaScript输入分钟、秒倒计时技巧总结(附代码)

    JavaScript输入分钟、秒倒计时技巧总结(附代码)

    这篇文章主要介绍了JavaScript输入分钟、秒倒计时的代码实现,通过css和js代码展示了逻辑过程,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • JS判定是否原生方法

    JS判定是否原生方法

    这篇文章介绍了js判定是否原生方法,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript实现防止网页被嵌入Frame框架的代码分享

    JavaScript实现防止网页被嵌入Frame框架的代码分享

    这篇文章主要介绍了JavaScript实现防止网页被嵌入Frame框架的代码分享,本文给出了2种防嵌入方法,需要的朋友可以参考下
    2014-12-12
  • location.href语句与火狐不兼容的问题

    location.href语句与火狐不兼容的问题

    在写JS跳转语句的过程中,发现这么一个问题,location.href语句与火狐不兼容的问题
    2010-07-07
  • JavaScript实现tab栏切换的效果

    JavaScript实现tab栏切换的效果

    这篇文章主要为大家详细介绍了JavaScript实现tab栏切换的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js实现键盘控制DIV移动的方法

    js实现键盘控制DIV移动的方法

    这篇文章主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下
    2015-01-01
  • JavaScript实现左右滚动电影画布

    JavaScript实现左右滚动电影画布

    这篇文章主要为大家详细介绍了JavaScript实现左右滚动电影画布,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • js中什么时候不能使用箭头函数

    js中什么时候不能使用箭头函数

    箭头函数是和我们工作密切相关的东西,本文主要介绍了js中什么时候不能使用箭头函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • js实现带圆角的两级导航菜单效果代码

    js实现带圆角的两级导航菜单效果代码

    这篇文章主要介绍了js实现带圆角的两级导航菜单效果代码,涉及javascript鼠标事件及页面元素样式动态变换技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08

最新评论