前端剪贴板复制功能实现原理
1. 兼容情况 如果想浏览器支持粘贴功能，那么浏览器必须支持，document.execCommand(‘copy’)方法，也可以根据document.queryCommandEnabled(‘copy’)，返回的true或者false判断浏览器是否支持copy命令。 从下表可以看出，主流的浏览器都支持execCommand命令 2. 复制的原理 查询元素 选中元素 执行复制命令 3. 代码展示 // html <input id="username" value="123456"> // 查询元素 var username = document.getElementById(‘username’) // 选中元素 username.select() // 执行复制 document.execCommand('copy') 注意: 以上代码只是简单示意，在实践过程中还有几个要判断的情况 首要要去检测浏览器execCommand能力检测 选取元素时，有可能选取元素为空，要考虑这种情况的处理 4. 第三方方案 clipboard.js是一个比较方便的剪贴板库，功能蛮多的。 <!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button> 官方给的代码里有上面的一个示例，如果你用了这个示例，但是不起作用，那你估计是没有初始化ClipboardJS示例的。 注意：下面的函数必须要主动调用，这样才能给响应的DOM元素注册事件。 ClipboardJS源代码压缩后大约有3kb，虽然很小了，但是如果你不需要它的这么多功能的话，其实你自己写几行代码就可以搞定复制功能。 new ClipboardJS('.btn');