使用JS实现自定义复制的功能
2017-11-05 本文已影响0人
固体物理学
本文介绍了JS与剪贴板相关的底层功能。
1. 背景
事情的起因是这样的，在从简书上面找了个别人的文章复制了一些内容，当复制的内容超过了一定字数的时候，就发现粘贴出来的东西多了一些内容，如下图所示。
1.png
由于最近刚好在研究JS的复制剪切，于是对这个功能进行深入研究。
2. document.execCommand
之前使用了一个插件Clipboard.js实现了JS的复制功能，研究之后发现是调用HTML5的document.execCommand，才能实现浏览器端的复制功能。
语法
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
返回值
一个 Boolean，如果是 false则表示操作不被支持或未被启用。
参数
我们这里只需要用到一些简单的功能，因此只使用第一个参数aCommandName就可以了。
一个 DOMString，命令的名称。可用命令列表请参阅文档。
命令
这里简单介绍一些用到的命令。
copy
拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
cut
剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。
paste
在光标位置粘贴剪贴板的内容，如果有被选中的内容，会被替换。剪贴板功能必须在 user.js 配置文件中启用。
从上面的介绍可以看出，复制功能都是对当前选中内容进行的相关操作，这都需要能获取到当前选中的对象，因此找到了一个新的API。
3. Window.getSelection
这个方法是对用户选择的文本范围进行的一些操作。
概述
返回一个 Selection对象，表示用户选择的文本范围或光标的当前位置。
语法
const selection = window.getSelection() ;
- selection
是一个Selection对象。 如果想要将selection转换为字符串，可使用String.toString()方法。
示例
function foo() {
let selObj = window.getSelection();
console.log(selObj);
let selectedText = selObj.toString();
let selRange = selObj.getRangeAt(0);
// 其他代码
}
-
selObj是一个Selection对象。 -
selectedText是一个字符串（被选中的文本）。
4. 实现思路
- 首先要响应浏览器的
copy事件，使用e.preventDefault()阻止默认的复制事件。 - 在响应浏览器的
copy事件时，通过Window.getSelection()获取到当前选中内容。然后使用document.createRange()保存下此时用户选中区的状态，以供后面使用。 - 创建一个
<textarea>标签，将他移到屏幕外边，将上一步中的内容，放到文本框内。并以字符串的形式添加上额外的内容。（注：为了能在添加的内容达到换行的效果，需要使用<textarea>标签而不是<input>，需要换行处添加'\n'字符串） - 使用文本框的
setSelectionRange()将文本框的内容选中，使用document.execCommand将此选中的内容进行复制。 - 最后，使用
selectionObject.addRange(range)将此前选中的选区进行选中。（注：此处详见参考资料3）
5. 实现代码
此代码在新版的chorme和firefox均可生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>addCopy</title>
<style>
#test {
border: 1px solid #000;
}
</style>
</head>
<body>
<dl id="test">
<dt>
<code>copy</code>
</dt>
<dd>拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。</dd>
<dt>
<code>cut</code>
</dt>
<dd> 剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。</dd>
<dt>
<code>paste</code>
</dt>
<dd>在光标位置粘贴剪贴板的内容，如果有被选中的内容，会被替换。剪贴板功能必须在 user.js 配置文件中启用。</dd>
</dl>
<p>复制以上黑框内的内容后在下面textarea粘贴看一下</p>
<textarea rows="4"></textarea>
<script type="text/javascript">
function makeAdditionMessage(targetDom, additionMsg) {
var body = document.getElementsByTagName('body')[0];
//使用textarea可以在添加内容的时候产生换行的效果
var hideTextarea = document.createElement('textarea');
body.appendChild(hideTextarea);
hideTextarea.style.position = 'absolute';
hideTextarea.style.left = '-9999px';
hideTextarea.style.top = '-9999px';
targetDom.addEventListener('copy', function (e) {
// 禁止默认的copy事件
e.preventDefault();
var selectionObject = window.getSelection();
var selectString = selectionObject.toString();
// 注意，这里制作的range光标选中框需要放在 生成新选区之前进行制作
var range = document.createRange();
range.setStart(selectionObject.anchorNode, selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode, selectionObject.focusOffset);
// 添加新增的内容，并将它们放入剪切板
hideTextarea.value = selectString;
hideTextarea.value += additionMsg;
hideTextarea.focus();
hideTextarea.setSelectionRange(0, hideTextarea.value.length);
var copy = document.execCommand('copy');
// 将此前选中的文本再进行选中
selectionObject.removeAllRanges();
selectionObject.addRange(range);
})
}
var test = document.getElementById('test');
var msg = '\n\n这是额外的第一行内容\n这是第二行';
makeAdditionMessage(test, msg);
</script>
</body>
</html>
6. 实现效果
- 选中某些文本进行复制
3.png
- 粘贴出来的示意图
4.png
