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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
javascript 写类方式之十
Jul 05 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
JS如何生成随机验证码
Mar 02 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
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
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
文本加密解密
2006/06/23 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
JavaScript中的闭包
2016/02/24 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python pickle模块实现对象序列化
2019/11/22 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
绩效专员岗位职责
2013/12/02 职场文书
园艺师求职信
2014/03/10 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
计生工作先进事迹
2014/08/15 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
党员剖析材料范文
2014/09/30 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
公司周年庆寄语
2019/06/21 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书