问题描述：
一些网站上会出现分享，转发之类的链接，只要点击按钮就直接复制到了剪贴板。我还找到了一些办法，其一是：ZeroClipboard 其二是：clipboard.js。
我分享的这个办法是原生态JS代码实现。在谷歌浏览器上不能实现。
解决办法：
1，原生态
<input type="text" id="inputText" value="要复制的内容"/>
<input type="button" id="btn" value="点击复制"/>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var inputText = document.getElementById('inputText');
var currentFocus = document.activeElement;
inputText.focus();
inputText.setSelectionRange(0, inputText.value.length);
document.execCommand('copy', true);
currentFocus.focus();
});
</script>
2，clipboard.js
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>this is 方案 1 </title>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--以下三个是备用 浏览器打不开第一个 换下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->
</head>
<body>
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
Copy to clipboard
</button>
<hr>
<br>
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
<script>
//必须要初始化 第一种初始化
var clipboard = new ClipboardJS('.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">
<title>this is 方案 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<div id="btn" data-clipboard-text="1">
<span>Copy</span>
</div>
<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--以下三个是备用 浏览器打不开第一个 换下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->
<!-- 3. Instantiate clipboard by passing a HTML element -->
<script>
var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(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">
<title>多个选择器下的复制</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>
<!-- 2. Include library -->
<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--以下三个是备用 浏览器打不开第一个 换下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->
<!-- 3. Instantiate clipboard by passing a list of HTML elements -->
<script>
var btns = document.querySelectorAll('button');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function(e) {
alert("已经复制到剪贴板");
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
3,直接调用函数即可，好用。
<script type="text/javascript">
function copyToClip(content, message) {
var aux = document.createElement("input");
aux.setAttribute("value", content);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
if (message == null) {
layer.msg("复制成功");
} else{
layer.msg(message);
}
}
</script>
4
<input id="hide" type="text" style='opacity: 0'>
function copy_url(short_url){
$("#hide").val(short_url);//这里可以获取动态数据赋值给$("#hide").val()
$("#hide").select();
try {
var state = document.execCommand("copy");
} catch(err){var state = false;}
if(state){
alert("复制成功")
}else{
alert("复制失败")
}
}
5
// 复制按钮 使用3，4的函数复制大量汉字时报错，可使用5.
$('#contentent').on('click','.btncopy',function(){
text=$(this).parent().siblings('.result').find('p').text();
navigator.clipboard.writeText(text).then(function() {
layer.msg('已复制到剪贴板');
}).catch(function(error) {
layer.msg('复制汉字到剪贴板时发生错误', error);
});
})