Js 实现剪切板复制功能

需求场景：

显示复制链接的按钮，将当前浏览器url地址复制到剪切板。
如下：
方法一、方法二：点击按钮，将输入框的内容复制到剪切板。
方法四：点击按钮，复制当前url到剪切板。
方法三：IE专用。
移动端浏览器，PC端浏览器测试。

方法一：

使用原生Js，核心方法document.execCommand("Copy");
自测可以使用的浏览器：ie9+，Chrome71，firefox63，360，Edge（Safari5不能使用）

复制链接【原生】

方法二：

使用JQuery，核心方法document.execCommand("Copy");，
与原生Js方式基本一致，select()方法使用方式也一致。
自测可以使用的浏览器：ie9+，Chrome71，firefox63，360，Edge（Safari5不能使用）

复制链接【JQuery】

!!!方法一和方法二缺点：
方法一、二直接使用时，必须有一个输入框input或者textarea，点击按钮时只能粘里面的内容。
同时，若将input框设置display:none，在使用select()方法时，没有选中的内容，没法正常copy到剪切板。

解决方案：
将 ，在将border:none;，然后添加click事件， 也可以实现点击复制的功能。
或者使用方法四。

方法三：

window.clipboardData.setData方法
此方法只适用于IE浏览器
自测可以使用的浏览器：ie7+【Edge不能用此方法】

！但用此方法需先“允许”

方法四：

使用场景举例：在直接点击复制链接，copy出当前地址栏的url。
使用插件clipboard.js（需引入JQ）

地址：https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js
官网：https://clipboardjs.com/#example-text

自测支持的浏览器，如下：
windows：ie9+，chrome71，firefox63，360，Edge（Safari5不能使用）；
Mac：chrome63，Safari12；
手机端：

浏览器	iPhone	华为MLA-AL00	华为P9	小米 Max3	红米 4x
微信	√	√	√	√	√
safari /手机自带浏览器	√	×	×	√	√
UC	√	√	√	√	√

复制链接【ClipboardJS】

浏览器支持情况：

注：
clipboard.js插件也是在document.execCommand 的基础上封装的。
所以方法一、方法二适用的浏览器情况也大致相同。

方法五：

用flash插件，暂未深入了解。关键词：zeroclipboard。

附：
方法一至四的完整demo：
https://download.csdn.net/download/dorothy1224/10982977