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


Posted in Javascript onMarch 22, 2017

正确的方法是正确运用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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
详解如何较好的使用js
Dec 16 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
简单了解JavaScript异步
May 23 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
angular异步验证器防抖实例详解
Mar 31 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
JavaScript登录记住密码操作(超简单代码)
Mar 22 #Javascript
原生JS京东轮播图代码
Mar 22 #Javascript
10道典型的JavaScript面试题
Mar 22 #Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
js弹出窗口简单实现代码
Mar 22 #Javascript
js实现自动图片轮播代码
Mar 22 #Javascript
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
采购员的工作职责
2013/12/26 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
大学生毕业鉴定
2014/01/31 职场文书
《手指教学》反思
2014/02/14 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
七年级作文之雪景
2019/11/18 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
Python极值整数的边界探讨分析
2021/09/15 Python
Python常遇到的错误和异常
2021/11/02 Python
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL