一键复制粘贴功能需要用到一个轻量级的射流研究…插件：剪贴板。js。

官网地址

下载到本地后，将其放入项目中，直接引用即可。具体实现代码如下：

！DOCTYPE html html head meta charset=' UTF-8 '标题一键复制粘贴/title样式。转移{宽度： 90%;余量： 20px自动；font-size : 18px} .转移按钮{ margin-top :-5px；向右浮动：左边距left: 10px背景-color: rgb(3，169，244)；宽度： 30%;高度： 25pxfont-size : 14px颜色：白色；边框： 0；边界半径： 8%;}/style/head body div class=' transfer '支付宝：span id=' zfb _ account ' 1111111111/span按钮onclick='copy1()'数据-剪贴板-操作='复制'数据-剪贴板-目标='#zfb_account' id='copy_zfb '一键复制/button /div div class='transfer '微信：span id=' wx _ account ' 22222/span按钮onclick=' copy 2()'数据-剪贴板-操作=' copy '数据-剪贴板-目标=' # wx _ account ' id=' copy _ wx '一键复制/button /div输入类型=' text '/body脚本类型=' text/JavaScript ' src=' http :/js/clipboard . min . js '/脚本脚本函数copy 1(){ var Clipboard=new Clipboard(' # copy _ zfb ')；剪贴板. on('成功'，函数(e){ e . clear selection()；//选中需要复制的内容警报('复制成功!');});剪贴板. on('错误，函数{ alert('当前浏览器不支持此功能，请手动复制。') });}函数copy 2(){ var Clipboard=new Clipboard(' # copy _ wx ')；剪贴板. on('成功'，函数(e){ e . clear selection()；//选中需要复制的内容警报('复制成功!');});剪贴板. on('错误，函数{ alert('当前浏览器不支持此功能，请手动复制。') });}/脚本/html效果图：

注意：如果你在项目中使用了其他的前端框架或者插件，有可能会与剪贴板。射流研究…插件产生冲突。解决方法，可以使用iframe/标签，将此部分代码放在一个新的超文本标记语言文件中，然后在主文件中使用iframe/标签引入。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。