js 实现文本选中与复制
方法一：
selection api 配合 createRange api 配合 document.execCommand('copy', true)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS选中文字复制文本内容</title>
</head>
<body>
<div onmouseup="copySelectTest(this)">我是被复制的内容</div>
<div onmouseup="copySelectTest(this)">我是被复制的内容2</div>
<script type="text/javascript">
function selectElementText(el) {
if (document.selection) { // IE8 以下处理
var oRange = document.body.createTextRange();
oRange.moveToElementText(el);
oRange.select();
} else {
var range = document.createRange(); // create new range object
range.selectNodeContents(el); // set range to encompass desired element text
var selection = window.getSelection(); // get Selection object from currently user selected text
selection.removeAllRanges(); // unselect any user selected text (if any)
selection.addRange(range); // add range to Selection object to select it
}
}
function copySelectionText() {
var copysuccess; // var to check whether execCommand successfully executed
try {
copysuccess = document.execCommand("copy"); // run command to copy selected text to clipboard
} catch (e) {
copysuccess = false;
}
return copysuccess;
}
function copySelectTest(e) {
selectElementText(e); // select the element's text we wish to read
var copysuccess = copySelectionText();
if (copysuccess) {
alert('已成功复制')
}
}
</script>
</body>
</html>
注意：这个方法只能是纯文本元素，如果像 input 、 textarea 表单元素，传入后无法进行选中 ，对于表单元素，可以通过执行 select() 方法，来进行复制
// 创建输入框 var textarea = document.createElement('textarea'); document.body.appendChild(textarea); // 赋值 textarea.value = '复制的文本内容...'; // 选中 textarea.select(); // 复制 document.execCommand('copy', true);
document.execCommand注意 ：
copy 命令执行方法，第二个参数要传入 true，否则不生效；
虽然很好用，但官方文档已不推荐使用
MDN第二个参数的解释：一个布尔值，指示是否应显示默认用户界面。这在 Mozilla 中没有实现。
方法二：
if (navigator.clipboard) { navigator.clipboard.writeText(text); }
注意：但是我在 chrome 下试了，navigator 下没有 clipboard 方法
贴下张鑫旭写的综合两种方法的代码：
var text = '被复制的内容，啦啦啦~'; if (navigator.clipboard) { // clipboard api 复制 navigator.clipboard.writeText(text); } else { var textarea = document.createElement('textarea'); document.body.appendChild(textarea); // 隐藏此输入框 textarea.style.position = 'fixed'; textarea.style.clip = 'rect(0 0 0 0)'; textarea.style.top = '10px'; // 赋值 textarea.value = text; // 选中 textarea.select(); // 复制 document.execCommand('copy', true); // 移除输入框 document.body.removeChild(textarea); }
参考文档：https://www.jianbaizhan.com/article/618
https://www.zhangxinxu.com/wordpress/2021/10/js-copy-paste-clipboard/
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
