被选择文本示例代码:

<p>发大幅<strong>大大泡泡糖</strong>度那附近那<strong>小头爸爸</strong>多好撒节点是的是</p>

以下几个属性和方法兼容性良好,而且对文本和输入框都有效。

var selObj = window.getSelection();
// 获取跟选择范围有关的信息
var selRange = selObj.getRangeAt(0);
// 返回选中的文本
var selectedText = selObj.toString();
// 返回聚焦元素
var active = document.activeElement;

锚点是用户开始选择的位置,焦点是用户选择结束的位置。如果使用桌面鼠标进行选择,则锚点是按下鼠标按钮的位置,焦点是释放鼠标按钮的位置。锚点和焦点不应与选择的开始和结束位置混淆。

一、Selection属性

1. Selection.anchorNode

返回选择的锚点的节点。如果文档中从未存在选择,则返回null。

2. Selection.anchorOffset

返回一个数字,表示选择的锚点的偏移量。如果anchorNode是文本节点,则这是锚点之前的anchorNode中的字符数。如果anchorNode是一个元素,则这是锚点之前的anchorNode的子节点数。

3. Selection.focusNode

返回选择的焦点的节点。如果文档中从未存在选择,则返回null。

4. Selection.focusOffset

返回一个数字,表示选择的焦点的偏移量。如果focusNode是文本节点,则这是焦点之前的focusNode中的字符数。如果focusNode是一个元素,则这是焦点之前的focusNode的子节点数。

5. Selection.isCollapsed

返回一个布尔值,表示锚点和焦点是否位于同一位置。

6. Selection.rangeCount

返回选择中的范围数。

7. Selection.type

返回当前选择的类型(Range,Caret 等)。

二、Selection方法

1. Selection.addRange()

添加选择范围(目前只有Firefox支持多个选择范围)。

2. Selection.containsNode(node [,partial])

表示某个节点是否是选择的一部分。

partial 当设置为true时,节点的一部分是选择的一部分时返回true。当设置为false时,仅在整个节点是选择的一部分时返回true。默认是false

3. Selection.deleteFromDocument()

从文档中删除选择的内容。

4. Selection.removeRange(range)

从选择中删除范围。

5. Selection.removeAllRanges()

从选择中删除所有范围。别名是 Selection.empty()。

6. Selection.extend(node [,offset])

将选区的焦点移动到指定点。

  参数:node - 将移动焦点的节点。

       offset - 焦点移动到node的偏移位置。默认为0(按子节点的数量算)。

7. Selection.getRangeAt(index)

返回其中一个选择范围。

8. Selection.selectAllChildren(parentNode)

选中指定节点的所有子节点。

9. Selection.setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)

将选择设置为包括两个指定DOM节点的全部或部分以及位于它们之间的任何内容的范围。

10. Selection.toString()

返回选中的文本。

参考:https://developer.mozilla.org/en-US/docs/Web/API/Selection

Selection对象相关推荐

  1. Selection 对象

    获取 Selection 对象 var selObj = window.getSelection(); //或者 document.getSelection(); Selection 对象表示用户选择 ...

  2. 关于document.selection和TextRange对象的介绍

    document.selection只有IE支持 window.getSelection()也只有FireFox和Safari支持,都不是标准语法. selection 对象代表了当前激活选中区,即高 ...

  3. JavaScript标准Selection操作

    简介 术语 属性 方法 document.activeElement document.designMode = 'on'; 简介 selection是对当前激活选中区(即高亮文本)进行操作. 在非I ...

  4. javascript range 转为 html,javascript Range对象跨浏览器常用操作

    开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码. 以下是个人对Range对象的了解和常用操作的实例和总结: Rang ...

  5. Excel Application对象应用

    Application对象是Excel对象模型中最高层级的对象,代表Excel应用程序自身,也包含组成工作簿的许多部分,包括工作簿.工作表.单元格集合以及它们包含的数据. Application对象包 ...

  6. Excel Application对象应用大全

    [完美Excel]本文以MSDN中的技术文章<Developers Guide to the Excel 2007 Application Object>为线条,参考了一系列相关技术文章和 ...

  7. 【selection】 学习光标API并实现编辑区插入表情图片的功能

    目录 场景介绍 selection介绍 selection API range 介绍 range API 实现编辑区插入表情图片 参考资料 场景介绍 在写web版聊天器时,遇到一个需求: 聊天时用户可 ...

  8. VSTO Shapes对象、ShapeRange对象和Shape对象的关系

    先附上官方文档网址: Office Visual Basic for Applications (VBA) 参考 | Microsoft Learn 前言 我正在学习制作PPT插件,在PPT中,形状是 ...

  9. 在Visual Studio 中的监视窗口中监视Com对象变量

    在Visual Studio 中的监视窗口中监视Com对象变量 最近发现了一个问题,在CATIA二次开发时,过去用VB6的时候如果在监视窗口中输入COM对象变量,可以显示出对象的所有属性,如下: 但当 ...

最新文章

  1. 阿里无人车配送快递突破 100 万单,小蛮驴牵引的自动驾驶战略布局
  2. Swift - 委托(delegate)的介绍,及使用样例
  3. textarea 高度调整
  4. Erlang虚拟机的启动
  5. python 组合数库函数_Python数据分析之Numpy库(笔记)
  6. nacos集群的ap cp切换_配置中心Nacos
  7. CocosCreator1.x实现水流动的效果
  8. CryptoPunk 3443竞拍价达3000ETH
  9. setint 的用法
  10. 如何在JavaWeb程序中使用tld文件
  11. Mac电脑问题:磁盘读写NTFS怎么不行?
  12. vue-cli --动态配置Ip地址,而不需要每次都打包
  13. 教你如何打造网页爬虫工具(实现思路及源码下载)
  14. 计算机图形学 之 中点画线算法
  15. 天涯明月刀手游为什么服务器维护,天涯明月刀手游12.7日更新公告 更新内容详情一览...
  16. 【开源】云开发,一个功能相对齐全的校园社区论坛类小程序源码,表白墙小程序
  17. Unity Shader Alpha测试
  18. 超详细傻瓜iPhone自定义来电铃声教程
  19. 软件类大学生求职就业攻略(四)——求职面试
  20. 计算机模拟人脑,人造突触问世,计算机模拟人脑不是梦

热门文章

  1. 【事故复盘】吐血整理一场线上事故——CPU飙升200%
  2. 台式计算机功率在哪看,鲁大师如何查看电脑使用功率 查看电脑使用功率的方法教程...
  3. 什么样的蓝牙耳机戴着舒服、骨传导不入耳式蓝牙耳机推荐
  4. 无线蓝牙入耳式耳机哪个品牌好?入耳式无线蓝牙耳机排行
  5. python下载文件损坏_Python检查图片是否损坏及图片类型是否正确过程详解
  6. 3D打印中喷头不出丝是不是常见问题,如何来解决?
  7. Mybatis使用Oracle数据库主键自增
  8. 带着你去找北儿, 你猜是哪?
  9. bugku-闪电十六鞭
  10. html5点赞仿抖音,iOS仿抖音—加载点赞动画效果