https://www.cnblogs.com/qigege/p/17461710.html
复制内容到剪切板分两种情况:
一种是从页面已有的可选元素中选中内容进行复制
一种是将Javascript代码中的字符串直接复制到剪切板。
复制页面元素选中内容
1
2
3
4
5
6
7
8
9
10
11
<input type="textarea" id="txt" />
<button onclick="copy()">复制</button>
function copy() {
var element = document.getElementById("txt");
element.select();
element.setSelectionRange(0, element.value.length);
document.execCommand('copy');
alert("已复制到剪切板");
}
复制字符串到剪切板
复制字符串采用临时添加一个元素，模拟选中内容进行选中的方式进行复制，复制后移除临时添加的元素即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//复制文本
function copyText(text) {
var element = createElement(text);
element.select();
element.setSelectionRange(0, element.value.length);
document.execCommand('copy');
element.remove();
alert("已复制到剪切板");
}
//创建临时的输入框元素
function createElement(text) {
var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
var element = document.createElement('textarea');
// 防止在ios中产生缩放效果
element.style.fontSize = '12pt';
// 重置盒模型
element.style.border = '0';
element.style.padding = '0';
element.style.margin = '0';
// 将元素移到屏幕外
element.style.position = 'absolute';
element.style[isRTL ? 'right' : 'left'] = '-9999px';
// 移动元素到页面底部
let yPosition = window.pageYOffset || document.documentElement.scrollTop;
element.style.top = `${yPosition}px`;
//设置元素只读
element.setAttribute('readonly', '');
element.value = text;
document.body.appendChild(element);
return element;
}
