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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
如何基于python生成list的所有的子集
2019/11/11 Python
教师旷工检讨书
2014/01/18 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
《藏戏》教学反思
2014/02/11 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
政风行风评议整改方案
2014/09/15 职场文书
简易离婚协议书范本
2014/10/24 职场文书
通知函的格式
2015/04/27 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
鲁冰花观后感
2015/06/10 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
Echarts如何重新渲染实例详解
2022/05/30 Javascript