热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

本文主要介绍了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 = 'oRange.text'; 
 oRange.pasteHTML(oHtml); 
 } 

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


推荐阅读
  • 本文将探讨Java编程语言中对象和类的核心概念,帮助读者更好地理解和应用面向对象编程的思想。通过实际例子和代码演示,我们将揭示如何在Java中定义、创建和使用对象。 ... [详细]
  • 本文详细探讨了JavaScript中的作用域链和闭包机制,解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例,帮助读者更好地理解和掌握这些概念。 ... [详细]
  • JSOI2010 蔬菜庆典:树结构中的无限大权值问题
    本文探讨了 JSOI2010 的蔬菜庆典问题,主要关注如何处理非根非叶子节点的无限大权值情况。通过分析根节点及其子树的特性,提出了有效的解决方案,并详细解释了算法的实现过程。 ... [详细]
  • 目录一、salt-job管理#job存放数据目录#缓存时间设置#Others二、returns模块配置job数据入库#配置returns返回值信息#mysql安全设置#创建模块相关 ... [详细]
  • 本文详细介绍如何使用CSS自定义HTML5视频播放器的样式,涵盖常见属性及跨浏览器兼容性问题。发布时间:2020-09-14 14:46:29;来源:亿速云;阅读量:58;作者:小新。 ... [详细]
  • 本文详细介绍了如何在预装Ubuntu系统的笔记本电脑上安装Windows 7。针对没有光驱的情况,提供了通过USB安装的具体方法,并解决了分区、驱动器无法识别等问题。 ... [详细]
  • Appium + Java 自动化测试中处理页面空白区域点击问题
    在进行移动应用自动化测试时,有时会遇到某些页面没有返回按钮,只能通过点击空白区域返回的情况。本文将探讨如何在Appium + Java环境中有效解决此类问题,并提供详细的解决方案。 ... [详细]
  • 本文详细介绍了JSP的三大指令:page、include和taglib,重点探讨了静态包含与动态包含的区别及其应用场景,并解释了如何使用taglib指令引入第三方标签库。 ... [详细]
  • 如何清除Chrome浏览器地址栏的特定历史记录
    在使用Chrome浏览器时,你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ... [详细]
  • 2018-2019学年第六周《Java数据结构与算法》学习总结
    本文总结了2018-2019学年第六周在《Java数据结构与算法》课程中的学习内容,重点介绍了非线性数据结构——树的相关知识及其应用。 ... [详细]
  • Coursera ML 机器学习
    2019独角兽企业重金招聘Python工程师标准线性回归算法计算过程CostFunction梯度下降算法多变量回归![选择特征](https:static.oschina.n ... [详细]
  • 利用Selenium与ChromeDriver实现豆瓣网页全屏截图
    本文介绍了一种使用Selenium和ChromeDriver结合Python代码,轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行,而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]
  • Nginx 反向代理与负载均衡实验
    本实验旨在通过配置 Nginx 实现反向代理和负载均衡,确保从北京本地代理服务器访问上海的 Web 服务器时,能够依次显示红、黄、绿三种颜色页面以验证负载均衡效果。 ... [详细]
  • 本文深入探讨了SQL数据库中常见的面试问题,包括如何获取自增字段的当前值、防止SQL注入的方法、游标的作用与使用、索引的形式及其优缺点,以及事务和存储过程的概念。通过详细的解答和示例,帮助读者更好地理解和应对这些技术问题。 ... [详细]
  • 本题来自WC2014,题目编号为BZOJ3435、洛谷P3920和UOJ55。该问题描述了一棵不断生长的带权树及其节点上小精灵之间的友谊关系,要求实时计算每次新增节点后树上所有可能的朋友对数。 ... [详细]
author-avatar
fengzi199171
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有