html点击自动复制功能,html5页面如何实现点击复制的功能

html5页面如何实现点击复制的功能

发布时间：2020-09-22 11:07:18

来源：亿速云

阅读：136

作者：小新

这篇文章主要介绍了html5页面如何实现点击复制的功能，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

在实际工作中，有时候会遇到这样的需求，页面上有一个链接，不需要选中链接内容，只需要点击复制按钮，就可以把链接内容复制到剪切板。这时候可以使用clipboard插件来实现。以下是一个简单的demo。

首先可以通过npm install clipboard --save-dev 来安装该插件

clipboard示例

从属性里复制

复制到剪切板-111

---

从另外一个元素复制内容

222-从另外一个元素复制内容

复制到剪切板-222

---

JS里指定复制的内容

复制到剪切板-333

//从属性里复制

var btn = document.getElementById('btn');

var clipboard = new Clipboard(btn);//实例化

clipboard.on('success', function(e) {//复制成功执行的回调，可选

console.log(e);

});

clipboard.on('error', function(e) {//复制失败执行的回调，可选

console.log(e);

});

//从另外一个元素复制内容

var btn2 = document.getElementById('btn2');

var clipboard2 = new Clipboard(btn2);//实例化

clipboard2.on('success', function(e) {//复制成功执行的回调，可选

console.log(e);

});

clipboard2.on('error', function(e) {//复制失败执行的回调，可选

console.log(e);

});

//JS里指定复制的内容

var btn3 = document.getElementById('btn3');

var clipboard3 = new Clipboard(btn3, {

text: function() {

return '333-JS里指定复制的内容';

}

});

clipboard3.on('success', function(e) {//复制成功执行的回调，可选

console.log(e);

});

clipboard3.on('error', function(e) {//复制失败执行的回调，可选

console.log(e);

});