js复制按钮,html也能用的JS复制代码

2022-05-16 14:18:01  阅读 119 次 评论 0 条

1,首先下载JS文件,打开clipboard.js中文网http://clipboardjs.net/(2022年6月23日更新:中文网已经无法打开,请打开英文版网站:https://clipboardjs.com/),点击如图位置,下载源文件,将目录“dist”上传到服务器根目录

QQ截图20220516141927.png

2,在需要添加复制按钮的源文件中加入调用,在header前加调用代码:<script src="dist/clipboard.min.js"></script>

3,在body结尾处加上以下代码:

<script>

var clipboard = new ClipboardJS('.btn');


clipboard.on('success', function(e) {

    console.info('Action:', e.action);

    console.info('Text:', e.text);

    console.info('Trigger:', e.trigger);


    e.clearSelection();

});


clipboard.on('error', function(e) {

    console.error('Action:', e.action);

    console.error('Trigger:', e.trigger);

});

</script>

4,调用示例:

<div id="cp2">感谢亲的评价与支持,当我们用心烹饪的菜品得到您的肯定时,是我们最开心的时刻!期待您的下次光临!</div> <button class="btn" data-clipboard-target="#cp2">

    <img src="assets/clippy.svg" alt="复制">


复制结果:

感谢亲的评价与支持,当我们用心烹饪的菜品得到您的肯定时,是我们最开心的时刻!期待您的下次光临!



WPS达师专注于免费分享WPS Office使用教程、PPT、word模板及办公常用软件等资源,欢迎大家收藏和分享本站。
WPS表格数据付费处理请加QQ:3247742

发表评论


表情

还没有留言,还不快点抢沙发?