首页 > 其他分享 >关于浏览器的Selection对象,以及window.getSelection()的API用法

关于浏览器的Selection对象,以及window.getSelection()的API用法

时间:2023-04-21 10:35:53浏览次数:60  
标签:Selection 只读 getSelection window 选区 选中 框选 节点 光标

Selection 对象就是用户选择的文本范围或插入符号的位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。具有以下属性和方法。

 1、anchorNode

  只读属性,返回选区开始位置所属的节点。用户可能从左往右框选,也可能从右往左框选。但是锚点是不会移动的。(也就是鼠标按下所在的节点,如果没有选区,就是光标所在位置的节点)

2、anchorOffset

  只读属性,返回选区的锚节点(anchorNode)起点偏移量的数字。返回值从零开始计数,如果选区从锚节点(anchorNode)的第一个字符开始,返回值为 0。

  也就是鼠标按下时所在位置,到节点(ahchorNode)起始位置字符个数。

  

 

3、focusNode

  只读属性,返回所选内容的结束位置部分所属的节点。

4、focusOffset

  只读属性,返回选区终点在焦点(focusNode)中的偏移量(参考anchorOffset)。

5、isCollapsed

  只读属性,返回一个布尔值用于描述选区的起点和终点是否在同一个位置(表明是否进行了框选)。

6、rangeCount

  只读属性。这个值一般情况下都是1,除非在一个新打开的页面没有任何点击之前直接获取rangeCount才会是0。但是可以用js使选区包含多个range。

7、type

  只读属性,有三个值。

  None:当前没有任何选择。

  Caret:选区已折叠,即光标在字符之间,没有任何选区。

  Range:选择的是一个范围,即有选区。

8、getRangeAt()

  方法,返回一个包含当前选区内容的区域对象。也就是range。range会在下面详细讲到。

9、collapse()

  方法,可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面,则光标会在该处闪烁。

  window.getSelection().collapse(parentNode, offset)

  parentNode 光标落在的目标节点。

  offset 落在节点的偏移量。

 10、extend()

  方法,移动选中区的焦点到指定的点。选中区的锚点不会移动。选中区将从锚点开始到新的焦点,不论方向。

  sel.extend(node, offset)

  node 目标节点。 offset 偏移位置,默认为0。

   在这里,我写了一个定时器。图1 是页面刷新之后框选的内容,图2 是5秒之后框选的内容,可以看到,锚点没有发生移动,选中的焦点的位置发生了变化,到我传入的node节点上面。

11、modify()

  方法,但是是非标准的,不建议在生产环境使用。这里不展开说。可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Selection/modify

12、collapseToStart()

  方法,取消选区,并把光标定位在原选区的最开始处,如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在此处闪烁。

  注意:这个方法并不会在乎框选的方向,无论你是从左往右,还是从右往左框选。

 

 13、collapseToEnd()

  方法,取消当前选区,并把光标定位在原选区的最末尾处,如果此时光标所处的位置是可编辑的,且它获得了焦点,则光标会在原地闪烁。

14、selectAllChildren()

  方法,把指定元素的所有子元素设为选中区域,并取消之前的选中区域。

  window.getSelection().selectAllChildren(parentNode)

  所有 parentNode 元素的子元素会被设为选中区域,parentNode 本身除外。

15、addRange()  removeRange()  removeAllRanges() 是关于range的方法,另开一个单讲。

16、deleteFromDocument()

  方法,从页面中删除选中的内容。

17、toString()

  方法,返回当前选区的纯文本内容。

18、containsNode()

  方法,判断某一个Node是否为当前选区的一部分。

标签:Selection,只读,getSelection,window,选区,选中,框选,节点,光标
From: https://www.cnblogs.com/junlinglife/p/17245732.html

相关文章

  • Windows 10 补丁包 msu 转 cab 用 dism 安装
    dism/online/add-package/packagepath:.\Windows6.1-KB2533623-x64.cab/norestart或dism/online/add-package/packagepath:"C:\Users\Administrator\Desktop\pack\Windows6.1-KB2533623-x64.cab"/norestart或dism/online/add-package/packagepat......
  • Windows 与 虚拟机VirtualBox smb共享
    一、安装Samba更新系统:sudoaptupdatesudoaptupgrade安装Samba:sudoaptinstallsamba二、配置共享创建共享目录sudomkdir /samba_share允许用户访问,修改权限:sudochmod777 /samba_share三、配置Samba打开samba配置文件,sudovim /etc/samba/smb.conf按i进......
  • Window 端口冲突
     Window端口冲突的解决   在Java学习中Window操作系统下,类似ActiveMQ,Tomcat服务开启服务之后,服务在后台执行,经常遇到端口被占用该怎么办呢?可能多少童鞋都是进行修改端口或者重启相关的服务,但是重新启动之后,相关的端口仍然被占用。我们可能查找进程并kill进程。在window系......
  • 微信Windows版 v3.9.0.28 多开&消息防撤回正式版绿色版
    微信,大家工作中生活中用的最多的一款应用;很多公司喜欢用微信来作为工作沟通的工具,官方原版只支持登陆一个微信,这对于需要在电脑上登陆多个微信账号的朋友来说肯定是极其的不方便。另外有的时候别人撤回了一些重要消息,会导致我们错失部分重要内容。而这个绿色特别版本就 支持多开,......
  • 如何让 Windows 应用程序在 Parallels Desktop 中启动得更快
    经过十多年的发展,ParallelsDesktop在性能方面得到了突飞猛进的提升。但俗话说,“没有最快只有更快。”因此,在这篇文章中,小编将分享您一个小技巧:如何使您的Windows应用程序启动得更快。下图显示了视频中的同一台M1MacBookPro和在InteliMac上测试个过的启动时间。“第......
  • 基于.Net开发的ChatGPT客户端,兼容Windows、IOS、安卓、MacOS、Linux
    2023年目前要说最热的点,肯定是ChatGPT了。ChatGPT官方提供的网页版本,还有需要科*上网,很多人都会基于此进行封装。现在是移动互联网时代,基于手机APP的需求还是很大的。所以,今天给大家推荐一个ChatGPT客户端开源项目,兼容苹果和安卓手机、PC。项目简介这是基于C#开发的客户端,兼......
  • Windows服务程序整理器 - 开源研究系列文章
    这些天弄了一个Windows服务程序管理器,主要是对需要的Windows服务程序进行管理。这个也能够将自己开发的服务程序注册到操作系统里去运行。1、       项目目录;目录见下图,对代码进行了划分,比较简单。主处理类在Helper目录里。 2、       ......
  • Windows下搭建svn服务器端
    评:未使用成功,用visualsvn成功1、软件1)服务端:Subversionsubversion.apache.org-GettingSubversion-BinaryPackages-Windows-Win32Svn-Files-1.6.16-svn-win32-1.6.16.zip解压svn-win32-1.6.16.zip到C:\MyProgramFiles2)客户端:TortoiseSVNtortoisesvn.tigris.org......
  • Windows下的chcp命令(更改该控制台的活动控制台代码页)
    评:Chcp显示活动控制台代码页数量,或更改该控制台的活动控制台代码页。如果在没有参数的情况下使用,则chcp显示活动控制台代码页的数量。语法chcp[nnn]参数指定代码页。下表列出了所有支持的代码页及其国家(地区)或者语言:代码页国家(地区)或语言437美国708阿......
  • windows server 的日志手动筛选xml如何学习编写
    如何编写WindowsServer的日志筛选器,你需要先了解以下概念:1、WindowsEventLog:WindowsEventLog是WindowsServer操作系统提供的一种记录系统事件的机制,它可以记录操作系统、应用程序、安全、系统和其他类型的事件。2、EventViewer:EventViewer是Windows操作系统提供......