js实现一键复制到剪切板上_js实现一键复制功能

项目描述：最近做一个移动端活动页面，用户抽奖后会生成一个兑换码，为了优化用户体验，需要做一个复制按钮，能够一键复制兑换码。

项目需求: 兼容移动端所有主流浏览器。并且做为安卓和IOS的H5页面。

目前能够实现复制功能的方法有以下几种：

execCommand("copy");

clipboardData;

ZeroClipboard.js

1.execCommand:是doucment对象的方法,可以实现浏览器菜单的很多功能，如保存文件，打开新文件，撤销，复制，等等。可以更好的完成文本编辑

有如下用法:

【全选】

格式：document.execCommand("SelectAll");

【打开】

格式：document.execCommand("Open");

【另存为】

格式：document.execCommand("SaveAs");

【打印】

格式：document.execCommand("print");

【剪切】

格式：document.execCommand("Cut","false",null);

【删除】

格式：document.execCommand("Delete",null);

【改变文本字体】

格式：document.execCommand("FontName",sFontName);

【改变字体大小】

格式：document.execCommand("FontSize",sSize|iSize);

【使绝对定位的元素可拖动】

格式：document.execCommand("2D-Position","true");

【复制】

格式：document.execCommand("Copy",null);

等等

应用实例:

HTML：

js代码：

注意：经测试该方法，PC端IE需要手动设置权限，其他浏览器均支持，M端很少浏览器支持；

2. clipboardData:对象提供了对剪贴板的访问

clipboardData有三个方法：

clearData(sDataFormat)删除剪贴板中指定格式的数据；

clearData(sDataFormat)getData(sDataFormat)从剪贴板中获取制定格式的数据；

clearData(sDataFormat)setData(sDataFormat,sData)给剪贴板赋予指定格式的数据，返回true表示操作成功；

应用实例:

js代码：

注意：经测试该方法，仅在IE浏览器中有效；

在其他浏览器运行会报错：

firefox：TypeError: window.clipboardData is undefined

chrom: TypeError: Cannot read property 'setData' of undefined

经查资料：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！