JavaScript——Selection

引言

今天，看到一个简单的问题 “JavaScript 怎么实现复制黏贴？” …我尽不知如何回答。当然对于一些 JavaScript 实现复制黏贴的库我还是了解的，例如 clipborad.js。不过，回到问题根本，任何 JavaScript 库都是基于 JavaScript 的原生 API 设计的，后来了解一番，JavaScript 提供了 Selection 这个 API 来实现选中文本的复制黏贴。那么，接下来就来了解一下如何使用 Selection 。

属性

1.anchorNode
返回选中区域对应的节点

2.anchorOffset
返回选中区域的起始下标，需要注意起始下标会根据左右方向选择的次序不同来展示不同的下标。如果 anchorNode 是字符串则对应文字下标，anchorNode 是元素，则对应选中区域对应它之前的同级节点的数目。

3.focusNode
返回选中区域终点所在的节点。

4.focusOffset
与 anchorOffset 类似，如果是 focusNode 是字符串，则对应最后一个选中的字符所在的位置，focusOffset 是元素，则对应选中区域对应同级节点的总数。

5.rangeCount
返回选中的区域所对应的连续的范围内的数量。

6.type
返回选中区域所对应的类别是连续的 range，还是同一个位置的 isCollapsed。

方法

1.toString
返回当前选中区域的文本内容

2.containsNode(Node)
判断某个节点是否在选区内

3.addRange
将一个区域加入到当前选区中

PS：这里只罗列几个常用的，其他属性大家可以自行去 MDN 上看哈。

使用

获取选中的内容，并复制到剪切板：

var selection = window.getSelection();
document.addEventListener('mouseup', function() {if (selection.type === 'Range') {// 获取选区内容var selectedContent = selection.toString()// 执行复制命令document.execCommand('Copy')} else {console.log('you should select text!')}
})

接下来就可以黏贴了（Ctrl + V 或右键黏贴）。

PS：在没看 MDN 上的文档之前，我是这样获取选区的内容的（不推荐这样使用，但是可以深入了解一下 Selection 这个对象）：

var selection = window.getSelection();
document.addEventListener('mouseup', function() {if (selection.type === 'Range') {var wholeSelectArea = selection.focusNode.wholeText// 开始位置var startInx = selection.anchorOffset// 结束位置var endInx = selection.focusOffsetvar selectedArea = startInx < endInx ? str.slice(startInx, endInx) : str.slice(endInx, startInx)} else {console.log('you should select text!')}
}

JavaScript——Selection相关推荐

JavaScript 仿ios滑动选择器
从git上找了一个,不过不是我想要的,更改了许多.到了我想要的效果: roller_selector_0_9.js 首先上js: "use strict";/** Author: ...
CSS项目基础实战：实现小米官网+详细步骤分析+出错问题总结
1.有关项目的基本结构:|--html 文件与 CSS 文件单独设置分开.|--在html中引入:|--重置样式表|--网页基本样式表:所有网页所共有使用的部分:网页宽度.网页字体.颜色.设置最小宽度 ...
JavaScript标准Selection操作
简介术语属性方法 document.activeElement document.designMode = 'on'; 简介 selection是对当前激活选中区(即高亮文本)进行操作. 在非I ...
Requesting JavaScript AST from selection
Requesting JavaScript AST from selection 修改方法: window–>preferences–>javascript->Editor–> ...
JSP----An internal error occurred during: Requesting JavaScript AST from selection
Eclipse Error - An internal error occurred during: "Requesting JavaScript AST from selection&qu ...
针对JavaScript的常用事件、对象捕获和使用技巧
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event ...
javascript 手势缩放旋转拖动支持：hammer.js
原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 ...
Yahoo javascript 开源界面库YUI 和EXT
清清月儿整理 [yui][译]Yahoo!User Interface Libray 介绍 Yahoo! User Interface Library(简称yui) 是一个使用JavaScript编写 ...
Web API 接口-JavaScript全部api接口文档
当使用JavaScript编写网页代码时,有很多API可以使用.以下是所有对象.类型等接口的列表,你在开发网页应用程序或站点时使用它们. API文档地址:https://developer.mozil ...

JavaScript——Selection

引言

属性

方法

使用

JavaScript——Selection相关推荐

最新文章

热门文章