Selection对象
被选择文本示例代码:
<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对象相关推荐
- Selection 对象
获取 Selection 对象 var selObj = window.getSelection(); //或者 document.getSelection(); Selection 对象表示用户选择 ...
- 关于document.selection和TextRange对象的介绍
document.selection只有IE支持 window.getSelection()也只有FireFox和Safari支持,都不是标准语法. selection 对象代表了当前激活选中区,即高 ...
- JavaScript标准Selection操作
简介 术语 属性 方法 document.activeElement document.designMode = 'on'; 简介 selection是对当前激活选中区(即高亮文本)进行操作. 在非I ...
- javascript range 转为 html,javascript Range对象跨浏览器常用操作
开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码. 以下是个人对Range对象的了解和常用操作的实例和总结: Rang ...
- Excel Application对象应用
Application对象是Excel对象模型中最高层级的对象,代表Excel应用程序自身,也包含组成工作簿的许多部分,包括工作簿.工作表.单元格集合以及它们包含的数据. Application对象包 ...
- Excel Application对象应用大全
[完美Excel]本文以MSDN中的技术文章<Developers Guide to the Excel 2007 Application Object>为线条,参考了一系列相关技术文章和 ...
- 【selection】 学习光标API并实现编辑区插入表情图片的功能
目录 场景介绍 selection介绍 selection API range 介绍 range API 实现编辑区插入表情图片 参考资料 场景介绍 在写web版聊天器时,遇到一个需求: 聊天时用户可 ...
- VSTO Shapes对象、ShapeRange对象和Shape对象的关系
先附上官方文档网址: Office Visual Basic for Applications (VBA) 参考 | Microsoft Learn 前言 我正在学习制作PPT插件,在PPT中,形状是 ...
- 在Visual Studio 中的监视窗口中监视Com对象变量
在Visual Studio 中的监视窗口中监视Com对象变量 最近发现了一个问题,在CATIA二次开发时,过去用VB6的时候如果在监视窗口中输入COM对象变量,可以显示出对象的所有属性,如下: 但当 ...
最新文章
- 阿里无人车配送快递突破 100 万单,小蛮驴牵引的自动驾驶战略布局
- Swift - 委托(delegate)的介绍,及使用样例
- textarea 高度调整
- Erlang虚拟机的启动
- python 组合数库函数_Python数据分析之Numpy库(笔记)
- nacos集群的ap cp切换_配置中心Nacos
- CocosCreator1.x实现水流动的效果
- CryptoPunk 3443竞拍价达3000ETH
- setint 的用法
- 如何在JavaWeb程序中使用tld文件
- Mac电脑问题:磁盘读写NTFS怎么不行?
- vue-cli --动态配置Ip地址,而不需要每次都打包
- 教你如何打造网页爬虫工具(实现思路及源码下载)
- 计算机图形学 之 中点画线算法
- 天涯明月刀手游为什么服务器维护,天涯明月刀手游12.7日更新公告 更新内容详情一览...
- 【开源】云开发,一个功能相对齐全的校园社区论坛类小程序源码,表白墙小程序
- Unity Shader Alpha测试
- 超详细傻瓜iPhone自定义来电铃声教程
- 软件类大学生求职就业攻略(四)——求职面试
- 计算机模拟人脑,人造突触问世,计算机模拟人脑不是梦
热门文章
- 【事故复盘】吐血整理一场线上事故——CPU飙升200%
- 台式计算机功率在哪看,鲁大师如何查看电脑使用功率 查看电脑使用功率的方法教程...
- 什么样的蓝牙耳机戴着舒服、骨传导不入耳式蓝牙耳机推荐
- 无线蓝牙入耳式耳机哪个品牌好?入耳式无线蓝牙耳机排行
- python下载文件损坏_Python检查图片是否损坏及图片类型是否正确过程详解
- 3D打印中喷头不出丝是不是常见问题,如何来解决?
- Mybatis使用Oracle数据库主键自增
- 带着你去找北儿, 你猜是哪?
- bugku-闪电十六鞭
- html5点赞仿抖音,iOS仿抖音—加载点赞动画效果