1.js复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制功能</title>
</head>
<body>
<span id="copyText1">这里是被复制的内容</span>
<input type="button" onClick="copy1()" value="点击复制"/>
<span id="copyText2">44545123664444446666666</span>
<input type="button" value="复制" onclick="copy2(document.getElementById('copyText2'));" />
</body>
<script type="text/javascript">
function copy1() {
var copy = document.getElementById("copyText1").innerText;
var oInput = document.createElement('input');
oInput.value = copy;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display = 'none';
alert('复制成功');
}
function copy2(x) {
if (document.selection) {
var range = document.body.createTextRange(); //ie
range.moveToElementText(x);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
selection.removeAllRanges();
range.selectNodeContents(x);
selection.addRange(range);
}
document.execCommand("copy");
}
</script>
</html>
2.clipboard复制
使用npm工具安装
npm install clipboard --save
下载压缩包，链接：https://github.com/zenorocha/clipboard.js/archive/master.zip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clipboard基本的使用方法</title>
</head>
<body>
<!-- 1. 定义一些标记 -->
<!-- 2. 设置按钮 -->
<!-- 示例1：复制input元素的value值 -->
<input id="foo" type="text" value="这是input元素的value值" />
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button>
<!-- 示例2：剪切textarea元素的值 -->
<textarea id="bar">这里的文本可被复制或者剪切</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击剪切文字</button>
<!-- 示例3：复制div元素的值 -->
<div>这是div元素里的文字</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">复制来自div的文字</button>
<!-- 示例4：复制button自己设置的值 -->
<button class="btn" data-clipboard-text="这里的文字将被复制">复制自己的文字</button>
</body>
<!-- 3. 引入库文件 -->
<script src="./node_modules/clipboard/dist/clipboard.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> -->
<script>
//4. 实例化clipboard
var clipboard = new ClipboardJS('.btn');
//5. 复制成功的响应事件【按F12控制台可见】
clipboard.on('success', function (e) {
console.log(e);
//打印动作信息（copy或者cut）
console.info('Action:', e.action);
//打印复制的文本
console.info('Text:', e.text);
//打印trigger
console.info('Trigger:', e.trigger);
});
//6. 复制失败的响应事件
clipboard.on('error', function (e) {
console.log(e);
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clipboard高级的使用方法1</title>
</head>
<body>
<!-- 1. 基本信息定义 -->
<button class="btn">点击复制</button>
<div>这里的内容将被复制</div>
<!-- 2. 引入库文件 -->
<!-- <script src="./node_modules/clipboard/dist/clipboard.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script>
//3. 实例化clipboard
var clipboard = new ClipboardJS('.btn', {
target: function () {
//获取文档中第一个 <div> 元素：
return document.querySelector('div');
//返回文档中id为copy-btn的元素
//document.querySelector("#copy-btn");
//返回文档中 class="btn" 的第一个元素:
//document.querySelector(".btn");
//返回文档中 class="btn" 的第一个 <p> 元素:
//document.querySelector("p.btn");
//还有更多方法，可自行百度
},
});
//复制成功响应
clipboard.on('success', function (e) {
console.log(e);
});
//复制失败响应
clipboard.on('error', function (e) {
console.log(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clipboard高级的使用方法2</title>
</head>
<body>
<!-- 1. 定义基本元素 -->
<button class="btn">Copy</button>
<!-- 2. 引入库文件 -->
<!-- <script src="../dist/clipboard.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script>
//3. 实例化clipboard
var clipboard = new ClipboardJS('.btn', {
text: function () {
return '这里的文本将被复制';
},
});
//复制成功响应
clipboard.on('success', function (e) {
console.log(e);
});
//复制失败响应
clipboard.on('error', function (e) {
console.log(e);
});
</script>
</body>
</html>
