getSelection限制选取范围

// 选择容器元素
const box = document.queryselector('.box');// 监听选择事件
document.addEventListener('mouseup', (e) => {// 如果选择不在box内部,清除选择if (!box.contains(e.target)) {window.getSelection().removeAllRanges();}
});// 监听键盘事件,以防用户使用键盘进行选择
document.addEventListener('keyup', (e) => {// 检查是否有文本被选中const selection = window.getSelection();if (!box.contains(selection.anchorNode)) {selection.removeAllRanges();}
});

在自己手写富文本编辑器时通常会用到这一点

//通过vue3绑定编辑器dom
const editorRef = ref()//选中的文本
const text = ref('')
//选择器
const selection = ref({})
//位置信息
const range = ref(null)
//选中的文本所在节点
const node = ref(null)
const getContext = ()=>{selection.value = window.getSelection()if(selection.value.isCollapsed) returnif(selection.value.rangeCount <= 0) returntext.value = selection.value.toString()range.value = selection.value.getRangeAt(0)//父节点const element = range.value.commonAncestorContainer;/*过滤不是元素节点情况contains用于判断某个dom节点是否为另一个节点的子元素。用法示例:parentNode.contains(childNode)当前语句意为:当选中内容为dom且处于编辑器区域中时,获取被选中的文本所在的dom节点,并将之存入变量,如果不是dom节点那么将它的父元素存入变量。如果选中的内容超出了编辑器区域直接存入null,这样就可以起到限制getSelection()作用范围的效果。有兴趣的可以看看我写的简易版富文本编辑器,目前正在编码中后续测试无BUG后会贴出地址。*/if (element.nodeType === Node.ELEMENT_NODE && editorRef.value.contains(element)) {node.value = element} else if(editorRef.value.contains(element.parentElement)){node.value = element.parentElement}else{node.value = null}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/857778.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java的逻辑运算符

Java的逻辑与运算符&#xff1a; 符号 作用 说明 & 逻辑与&#xff08;且&#xff09; 并且&#xff0c;两边都为真&#xff0c;结果才是真 | 逻辑或 或者&#xff0c;两边都为假才是假 ^ 逻辑异或 …

轻松获取指定日期所在周的周一和周日

哈喽&#xff0c;大家好呀&#xff0c;好久不见&#xff01;今天是一篇浅记。根据传入日期自动获取所在周一和周日… 正常基操方法&#xff0c;根据传入日期自动获取所在周一和周日。注意传入日期是周日的情况哈&#xff0c;需要往前推7天才是周一。 楼主方法中已处理&#xf…

在 Clojure 中,如何实现高效的并发编程以处理大规模数据处理任务?

在Clojure中&#xff0c;可以使用以下几种方式来实现高效的并发编程以处理大规模数据处理任务&#xff1a; 并发集合&#xff08;Concurrent Collections&#xff09;&#xff1a;Clojure提供了一些并发集合数据结构&#xff0c;如ref、agent和atom&#xff0c;它们能够在多个线…

57.SAP MII产品介绍(07)功能详解(06)Workbench-SQLQuery

1.SQLQuery概念 您可以使用SAP Manufacturing Integration and Intelligence&#xff08;SAP MII&#xff09;Workbench中的SQLQuery来创建访问面向SQL的连接器&#xff08;如IDBC连接器&#xff09;的模板。此查询的扩展名为tqsq。 简而言之&#xff0c;SQLQuery就是一段…

计算机系统基础实训七-MallocLab实验

实验目的与要求 1、让学生理解动态内存分配的工作原理&#xff1b; 2、让学生应用指针、系统级编程的相关知识&#xff1b; 3、让学生应用各种动态内存分配器的实现方法&#xff1b; 实验原理与内容 &#xff08;1&#xff09;动态内存分配器基本原理 动态内存分配器维护…

细说MCU的ADC模块单通道单次采样的实现方法

目录 一、工程依赖的硬件 二、设计目的 三、建立工程 1、配置GPIO 2、配置中断 3、配置串口 4、配置ADC 5、选择时钟源和Debug 6、配置系统时钟和ADC时钟 四、设置采样频率 五、代码修改 1、重定义外部中断回调函数 2、启动ADC 3、配置printf函数 六、运行并…

mysql5.7windows安装修改密码

mysql5.7windows安装修改密码 1.首先下载Windows 64位安装包2.安装服务3.my.ini4.初始化4.做成Windows服务5.重置密码 1.首先下载Windows 64位安装包 2.安装服务 双击运行安装服务&#xff0c;一直next&#xff1b; 在Choose Setup Type界面中 选择Custom选项&#xff0c;意思…

【thinkphp问题栏】tp5.0分页技巧

一、调用内置方法paginate thinkphp内置了一个paginate方法支持分页功能 该方法位于library\think\db\Query.php内 /*** 分页查询* param int|array $listRows 每页数量 数组表示配置参数* param int|bool $simple 是否简洁模式或者总记录数* param array $config 配…

头歌资源库(14)残缺棋盘

一、 问题描述 二、算法思想 首先&#xff0c;将2^k 2^k的棋盘划分为四个相等大小的子棋盘&#xff0c;定义为左上、左下、右上和右下四个子棋盘。 然后&#xff0c;根据残缺格的坐标&#xff0c;确定其中一个子棋盘是不完整的&#xff0c;即残缺子棋盘。假设残缺子棋盘是左…

TOP命令参数

top命令是Linux和类Unix系统中一个非常强大的系统监控工具&#xff0c;用于实时查看系统中各个进程的资源使用情况。它可以显示CPU使用率、内存使用情况、进程PID、进程运行时间等重要信息。top命令支持多种参数和交互式命令&#xff0c;以下是主要参数及其含义&#xff1a; t…

新火种AI|Claude 3.5一夜封王超越GPT-4o!留给OpenAI的时间真的不多了...

AI大模型更新换代的速度&#xff0c;的确快到令人难以想象。 相信很多人现在对“最先进AI大模型”的印象还停留在GPT-4&#xff0c;但事实上&#xff0c;大模型领域的头把交椅早已悄然易主了好几回。就在GPT-4惊艳全球不久之后&#xff0c;其“死对头” Anthropic发布了Claude…

“循环购“:快消品行业的创新商业模式引领者

大家好&#xff0c;我是吴军&#xff0c;来自一家在软件开发与商业模式创新领域享有盛誉的公司。我们专注于为企业提供全方位的商城系统搭建及商业模式定制服务。迄今为止&#xff0c;我们已经成功地为众多企业打造了超过200种独特的商业模式&#xff0c;助力他们实现了显著的商…

如果你死了,你的代码怎么代替你继续存在下去

问你个问题&#xff0c;如果你写的程序代码特别耐用&#xff0c;特别引人注目&#xff0c;几乎全世界的人在用。那么问你个比较丧的问题&#xff0c;有一天你死了&#xff0c;你怎么维护你的程序代码呢&#xff1f; 你可能听说过这个人&#xff1a;Philip Hazel 。他在剑桥大学…

【Web3初识系列】如何连接 Binance Smart Chain通过交易对绘制 k 线?

连接 Binance Smart Chain通过交易对绘制 k 线 安装 web3 pip install web3连接到 Binance Smart Chain 使用公共的 BSC 节点 URL。 from web3 import Web3# 连接到 BSC 公共节点 bsc_url "https://bsc-dataseed.binance.org/" web3 Web3(Web3.HTTPProvider(bs…

【PL理论】(26) 内存管理:C语言实现内存管理的方式 | 栈帧的分配和释放 | C/C++ 手动内存管理

&#x1f4ad; 写在前面&#xff1a;在前面的章节中&#xff0c;语言的语义只分配了新的内存位置&#xff0c;我们没有讨论内存位置的释放。在实际的语言中&#xff0c;内存位置在执行过程中会被不断地分配和释放。下面的章节&#xff0c;我们将讨论编程语言的这种内存管理&…

套路化编程:C# ListView 保存、恢复列宽度

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 目录 技术基础 保存列头 删…

基于IDEA的Maven(依赖介绍和引用)

如何通过一个坐标信息&#xff08;依赖&#xff09;去引用 &#xff0c;某个"jar 包" 会在这篇博客进行学习。 目录 一、学习开始 &#xff08;0&#xff09;项目的结构组成和 "pom.xml" 文件内容。 &#xff08;1&#xff09;首先需要一个标签&#xf…

堆及其java手写实现

堆&#xff08;Heap&#xff09;是计算机科学中一种常用且高效的数据结构&#xff0c;通常被实现为一个完全二叉树。这个树形结构中的每个节点都有一个关联的值&#xff0c;并且这个值遵循一定的规则&#xff0c;从而使得堆具备特殊的性质&#xff0c;主要分为两种类型&#xf…

方差分析【单/双因素方差分析】

文章目录 方差分析一、单因素方差分析&#xff08;Analysis of Variance&#xff09;1.方差分析在做什么&#xff1f;2.方差分析的思路&#xff1a;3.方差分析中的计算&#xff1a;4.构造F统计量&#xff1a; 二、双因素方差分析(Two-way ANOVA)1.双因素方差分析在做什么&#…

时序预测 | Matlab基于Transformer多变量时间序列多步预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于Transformer多变量时间序列多步预测&#xff1b; 2.多变量时间序列数据集&#xff08;负荷数据集&#xff09;&#xff0c;采用前96个时刻预测的特征和负荷数据预测未来96个时刻的负荷数据&#xff1b; 3…