实现方式
直接通过插件形式即可,使用clipboard,该插件不到 4KB。
快速使用
1.html
<input value="www.xxx.com" type="text" readonly id="shareURL">
<button id="cpoyShareURLBtn" data-clipboard-target="#shareURL">复制链接</button>
2.引入JS
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
3.自己的脚本
//只加这一句即可
var clipboard = new ClipboardJS('#cpoyShareURLBtn');
//以下是复制过后的提示
clipboard.on('success', function(e) {
e.clearSelection();
var $copyTip= $("<div class='copy-tips' style='position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;'><div style=''>☺ 复制成功</div></div>");
$("body").find(".copy-tips").remove().end().append($copyTip);
$(".copy-tips").fadeOut(3000);
});
更多
剪切
在触发按钮添加这个属性
data-clipboard-action="cut"
示例:
<input value="www.xxx.com" type="text" id="shareURL">
<button id="cpoyShareURLBtn" data-clipboard-action="cut" data-clipboard-target="#shareURL">复制链接</button>
注意
剪切操作的对象只能为 input 和 textarea 标签
事件
用户复制后的事件有两个事件 success、error
clipboard 复制动作触发后,会自动选中目标内容,复制成功了可以清除效果,复制失败了只需提示用户按 ctrl + c 直接复制即可。
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
//清除选中效果
e.clearSelection();
alert('复制成功');
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
alert('请按 ctrl + c 复制');
});
浏览器支持
该插件的库依赖 Selection 和 execCommand 的 API 前者 兼容所有的浏览器,后者兼容 IE 9 +.
可以通过运行以下 JS 代码来检查浏览器是否支持 clipboard.js.
Clipboard.isSupported()
当然即使不支持,也可以使用上面提到的 error 事件,提示用户复制即可。