JavaScript实现复制到剪贴板

实现方式

直接通过插件形式即可，使用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 事件，提示用户复制即可。