前端通过js将文本复制到剪切板上.使用clipboard.js
吕宸
下载地址 : https://download.csdn.net/download/dongyan3595/86723306
详细请参考 : clipboard.js基本使用_xiaobaixiaye的博客-CSDN博客_clipboard.js
将需要复制的文字放到 data-clipboard-text 上 , 调用方法就可以复制了
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body id="pageArea" class="list">
<button type="button" id="copyText" data-clipboard-text="这是需要复制的文本" onclick="copyText();">复制文本</button>
<button type="button" id="copyText2" onclick="copyText2();">复制文本</button>
<script src="jquery.min.js"></script>
<script src="clipboard.min.js"></script>
<script>
// 无法复制display:none的节点 , 可以设置为opacity:0
// 数据源固定
function copyText() {
var clipboard = new Clipboard('#copyText');
clipboard.on('success', function(e) {
alert("已复制到剪切板")
console.info('Text:', e.text);
e.clearSelection();
});
clipboard.on('error', function(e) {
alert("复制失败");
});
}
// 数据源不固定
function copyText2() {
var clipboard = new Clipboard('#copyText', {
text: function(trigger) {
return "动态的文字";
}
});
clipboard.on('success', function(e) {
alert("已复制到剪切板")
console.info('Text:', e.text);
e.clearSelection();
});
clipboard.on('error', function(e) {
alert("复制失败");
});
}
</script>
</body>
</html>
类似资料：