前端哥最近在做在线工具箱，用到了js复制、粘贴的功能，刚好现在有时间就记录下来，避免将来需要用到时候随机可查阅，同时也希望帮助到各位正在学习的前端小伙伴们
前端哥用到的是浏览器自带clipboard API实现复制粘贴：
我先大概的介绍一下clipboard API，无需引入任何第三方插件，原生js实现
ClipboardAPI是下一代的剪贴板操作方法，比传统的document.execCommand()方法更加强大、更合理。
特点
（1）它的所有操作都是异步进行的，返回promise对象，不糊造成页面卡顿，
（2）它可以将任何内容（例如图片）放入到剪贴板。
（3）安全。通过navigator.clipboard属性返回Clipboard对象，所有操作都通过这个对象进行，如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持这个API。
1）有时候用户可能会把敏感数据（比如密码）放在剪贴板允许脚本任意读取会产生风险，而通过Clipboard对象进行判断，则很好的避免了这个风险。
2）此外，有些浏览器规定（例如Chrome），只有HTTPS协议的页面才能使用这个API（不过开发环境下、本地允许使用非加密协议）
3）其次，复制权限是用户默认赋予的，而粘贴权限是需要用户手动同意的，例如，在写入剪贴板时脚本可以自动完成，但是读取剪贴板时，浏览器会弹出一个对话框咨询用户是否同意读取。
4）有一点需要特别注意，脚本读取的是当前页面的剪切板（注意我说的是浏览器中的剪贴板，而不是电脑操作系统自带的剪贴板），这带来一个问题，如果想把相关的代码粘贴到开发者工具中直接运行，可能会报错，因为这时的当前页面是开发者工具的窗口，而不是网页页面。
demo效果图：
接下来就是最重要的干货部分了，代码如下：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>js复制粘贴完整案例——前端哥</title> </head> <body> <h1 style="text-align: center;">js复制粘贴完整案例——前端哥</h1> <div style="width: 320px; margin: 30px auto 0px auto;"> <!-- Target --> <input type="text" id="foo" placeholder="要复制的内容" value="" /> <!-- Trigger --> <button class="btn" id="copy">复制</button> <br> <input type="text" id="pastevalue" placeholder="这里是粘贴的内容" /> <!-- Trigger --> <button class="paste" id="paste">粘贴</button> </div> <script> //点击复制事件 document.getElementById("copy").onclick = function() { let copyval = document.getElementById("foo").value; console.log("复制的内容：" copyval); copyText(copyval); }; //复制事件 function copyText(text) { var textarea = document.createElement("textarea"); var currentFocus = document.activeElement; document.body.appendChild(textarea); textarea.value = text; textarea.focus(); if (textarea.setSelectionRange) textarea.setSelectionRange(0, textarea.value.length); else textarea.select(); try { var flag = document.execCommand("copy"); } catch (eo) { var flag = false; } document.body.removeChild(textarea); currentFocus.focus(); return flag; } //粘贴 document.getElementById("paste").onclick = function() { paste(); }; async function paste() { try { const text = await navigator.clipboard.readText(); document.getElementById("pastevalue").value = text; } catch (err) { console.log("粘贴失败！", err); } }; </script> </body></html>