常用的API：
Document.createRange()：返回一个Renge对象，通过Range对象可以选中文本。
// 选中id为test的元素的内容
const range = document.createRange();
range.selectNode(document.getElementById('test'));
const selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);Window.getSelection：返回一个 Selection对象，表示用户选择的文本范围或光标的当前位置。
const selection = window.getSelection();
const selectedText = selection.toString(); // 获取当前选中的文本
console.log(selectedText)document.execCommand：document暴露?execCommand方法，该方法允许运行命令来操纵可编辑内容区域的元素。
// const bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
const bool = document.execCommand('copy'); // 执行复制命令在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。
????????关于<script>标签的位置问题，虽然<script></script>可以放在<head></head>里面，也可放在<body></body>里面，但为了避免浏览器加载延迟，最好是放在</body>前面。
内部嵌入：直接在HTML文档内使用<script></script>标记对引入。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端实现复制功能</title>
</head>
<body>
<p>
<label>姓名：</label><input type="text" id="input_copy1"><button class="copy_input1">复制</button>
</p>
<p>
<label>个人描述：</label>
<textarea id="input_copy2"></textarea><button class="copy_input2">复制</button>
</p>
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名<button id="copy_div1">复制</button></th>
<th>性别<button id="copy_div2">复制</button></th>
</tr>
<tr>
<td>
<div id="div_copy1">小王</div>
</td>
<td>
<div id="div_copy2">女</div>
</td>
</tr>
</table>
<script>
/*
* 复制输入框内容
*/
function copyInput1() {
var copyVal = document.querySelector("#input_copy1");
copyVal.select();
return document.execCommand('copy');
}
function copyInput2() {
var copyVal = document.querySelector("#input_copy2");
copyVal.select();
return document.execCommand('copy');
}
/*
* 复制元素节点的内容
*/
function copyDiv1() {
var range = document.createRange();
range.selectNode(document.querySelector('#div_copy1'));
var selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
return document.execCommand('copy');
}
function copyDiv2() {
var range = document.createRange();
range.selectNode(document.querySelector('#div_copy2'));
var selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
return document.execCommand('copy');
}
/*
* 提示
* param {Boolean} status
*/
function tips(status) {
if (status) {
alert('复制内容成功');
} else {
alert('复制失败，可选中内容手动复制');
}
}
document.querySelector('.copy_input1').addEventListener('click', function () {
var isCopyed = copyInput1();
tips(isCopyed);
}, false);
document.querySelector('.copy_input2').addEventListener('click', function () {
var isCopyed = copyInput2();
tips(isCopyed);
}, false);
document.querySelector('#copy_div1').addEventListener('click', function () {
var isCopyed = copyDiv1();
tips(isCopyed);
}, false);
document.querySelector('#copy_div2').addEventListener('click', function () {
var isCopyed = copyDiv2();
tips(isCopyed);
}, false);
</script>
</body>
</html>运行效果：
如果是输入类型元素：直接调用select方法选中内容，再启动copy命令
如果是普通元素 ：需要通过document.createRange选中节点内容，再通过window.getSelection选中元素内容，再启动copy命令
注意：
input输入类型的元素
- 不能有disabled属性
- width || height 不能为0
- 不能有hidden、display:none属性
普通类型元素
- width || height 不能为0
- 不能有display:none属性
外部引入：通过src属性指定外部JavaScript文件链接。
????????这里使用 src 属性引入javascript.js的JS文件，在js文件里面，无需写<script type="text/javascript"></script>了，直接开始js脚本的编写。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端实现复制功能</title>
</head>
<body>
<p>
<label>姓名：</label><input type="text" id="input_copy1"><button class="copy_input1">复制</button>
</p>
<p>
<label>个人描述：</label>
<textarea id="input_copy2"></textarea><button class="copy_input2">复制</button>
</p>
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名<button id="copy_div1">复制</button></th>
<th>性别<button id="copy_div2">复制</button></th>
</tr>
<tr>
<td>
<div id="div_copy1">小王</div>
</td>
<td>
<div id="div_copy2">女</div>
</td>
</tr>
</table>
<script type="text/javascript" src="copy.js"></script>
</body>
</html>copy.js
/*
* 复制输入框内容
*/
function copyInput1() {
var copyVal = document.querySelector("#input_copy1");
copyVal.select();
return document.execCommand('copy');
}
function copyInput2() {
var copyVal = document.querySelector("#input_copy2");
copyVal.select();
return document.execCommand('copy');
}
/*
* 复制元素节点的内容
*/
function copyDiv1() {
var range = document.createRange();
range.selectNode(document.querySelector('#div_copy1'));
var selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
return document.execCommand('copy');
}
function copyDiv2() {
var range = document.createRange();
range.selectNode(document.querySelector('#div_copy2'));
var selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
return document.execCommand('copy');
}
/*
* 提示
* param {Boolean} status
*/
function tips(status) {
if (status) {
alert('复制内容成功');
} else {
alert('复制失败，可选中内容手动复制');
}
}
document.querySelector('.copy_input1').addEventListener('click', function () {
var isCopyed = copyInput1();
tips(isCopyed);
}, false);
document.querySelector('.copy_input2').addEventListener('click', function () {
var isCopyed = copyInput2();
tips(isCopyed);
}, false);
document.querySelector('#copy_div1').addEventListener('click', function () {
var isCopyed = copyDiv1();
tips(isCopyed);
}, false);
document.querySelector('#copy_div2').addEventListener('click', function () {
var isCopyed = copyDiv2();
tips(isCopyed);
}, false);
注意：本人测试此处js代码必须放到HTML代码的后面才起作用，原因未知，希望大佬们指教！
