html⾃动复制功能,html5页⾯如何实现点击复制的功能(完整
代码)html自动弹出公告代码
本篇⽂章给⼤家带来的内容是关于html5页⾯如何实现点击复制的功能 (完整代码),有⼀定的参考价值,有需要的朋友可以参考⼀下,希望对你有所帮助。
在实际⼯作中,有时候会遇到这样的需求,页⾯上有⼀个链接,不需要选中链接内容,只需要点击复制按钮,就可以把链接内容复制到剪切板。这时候可以使⽤clipboard插件来实现。以下是⼀个简单的demo。
⾸先可以通过npm install clipboard --save-dev 来安装该插件
clipboard⽰例
从属性⾥复制
复制到剪切板-111
从另外⼀个元素复制内容
222-从另外⼀个元素复制内容
复制到剪切板-222
JS⾥指定复制的内容
复制到剪切板-333
//从属性⾥复制
var btn = ElementById('btn');
var clipboard = new Clipboard(btn);//实例化
<('success', function(e) {//复制成功执⾏的回调,可选
console.log(e);
});
<('error', function(e) {//复制失败执⾏的回调,可选
console.log(e);
});
//从另外⼀个元素复制内容
var btn2 = ElementById('btn2');
var clipboard2 = new Clipboard(btn2);//实例化
<('success', function(e) {//复制成功执⾏的回调,可选
console.log(e);
});
<('error', function(e) {//复制失败执⾏的回调,可选
console.log(e);
});
/
/JS⾥指定复制的内容
var btn3 = ElementById('btn3');
var clipboard3 = new Clipboard(btn3, {
text: function() {
return '333-JS⾥指定复制的内容';
}
});
<('success', function(e) {//复制成功执⾏的回调,可选console.log(e);
});
<('error', function(e) {//复制失败执⾏的回调,可选console.log(e);
});

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。