明确需求
为了提升用户体验，点击【复制】按钮就自动复制到剪贴板，那么就需要前端实现这种功能了。
首先明确了需求就先看一下最终图片：
html分析
左边是一个input的文本框，只读，右边是一个按钮。
代码实现：
<!--左边是一个input输入框，要求只读，而且里面的内容通过url?后面的code传入--> <input type="text" value="AJS4EFS" readonly id="textAreas"/> <!--右边是一个按钮--> <a href="javascript:;" class="cuteShareBtn" id="copy">复制</a>
css分析
这种东西就跳过吧，不是重点。
js分析
- 点击按钮获取input对象
解决方法：
- 如果使用的jquery，那么直接$("#textArea").select()选中的就是这个input对象
- 如果使用的zepto，上面的方法是获取到的zepto对象是不支持原生select()方法的，那么就使用原生的办法
var obj = document.getElementById("textAreas");obj.select();
- 然后复制到剪贴板
两行？看起来是不是很简单？哈哈~那你就错了，这里面是有坑的。 第一目前没有一个很完美的方法可以兼容各个浏览器和移动端，引用插件也是一样的。 查了半天最好的办法就是使用 document.execCommand("Copy") 兼容性是不错的：
手机安卓支持到4.1、各种浏览器是可以的，但是唯独ios是不支持的，来给我把刀，ios你这玩意你限制是干什么？是要保护手机安全还是咋的。 所以只是pc端 使用那么就下面几行代码就可以搞定了：
pc端代码实现
//复制按钮事件绑定 $("#copy").on("tap",function(){ //获取input对象 var obj = document.getElementById("textAreas"); //选择当前对象 obj.select(); try{ //进行复制到剪切板 if(document.execCommand("Copy","false",null)){ //如果复制成功 alert("复制成功！"); }else{ //如果复制失败 alert("复制失败！"); } }catch(err){ //如果报错 alert("复制错误！") } })
移动端代码实现
那如果是移动端 的话，就要兼容IOS，但是依然在iPhone5的10.2的系统中，依然显示复制失败，由于用户使用率较低，兼容就做到这里，那些用户你们就自己手动复制吧。 下面的两种方法都可以进行复制，因为核心代码就那么几行，先来简单的：
$("#copy").on("tap",function(){ //获取input对象 var obj = document.getElementById("textAreas"); //如果是ios端 if(isiOSDevice){ // 获取元素内容是否可编辑和是否只读 var editable = obj.contentEditable; var readOnly = obj.readOnly; // 将对象变成可编辑的 obj.contentEditable = true; obj.readOnly = false; // 创建一个Range对象，Range 对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域 var range = document.createRange(); //获取obj的内容作为选中的范围 range.selectNodeContents(obj); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); obj.setSelectionRange(0, 999999); //选择范围，确保全选 //恢复原来的状态 obj.contentEditable = editable; obj.readOnly = readOnly; //如果是安卓端 }else{ obj.select(); } try{ if(document.execCommand("Copy","false",null)){ alert("复制成功！"); }else{ alert("复制失败！请手动复制！"); } }catch(err){ alert("复制错误！请手动复制！") } })
下面是一个比较完整的升级版方法，和插件Clipboard.js一样，不过代码不多，就直接拿来用好了。 这个获取的不是input对象，而是需要复制的内容。
//定义函数 window.Clipboard = (function(window, document, navigator) { var textArea, copy; // 判断是不是ios端 function isOS() { return navigator.userAgent.match(/ipad|iphone/i); } //创建文本元素 function createTextArea(text) { textArea = document.createElement('textArea'); textArea.value = text; document.body.appendChild(textArea); } //选择内容 function selectText() { var range, selection; if (isOS()) { range = document.createRange(); range.selectNodeContents(textArea); selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); textArea.setSelectionRange(0, 999999); } else { textArea.select(); } } //复制到剪贴板 function copyToClipboard() { try{ if(document.execCommand("Copy")){ alert("复制成功！"); }else{ alert("复制失败！请手动复制！"); } }catch(err){ alert("复制错误！请手动复制！") } document.body.removeChild(textArea); } copy = function(text) { createTextArea(text); selectText(); copyToClipboard(); }; return { copy: copy }; })(window, document, navigator);
使用函数
//使用函数 $("#copy").on("tap",function(){ var val = $("#textAreas").val(); Clipboard.copy(val); });
注意
使用range这种方案都不太好用！！！！复制不出来内容，还是需要使用select
更多移动端复制可参考
项目问题总结（四十五）《公司转账一键复制》：移动端如何实现点击复制？复制时如何保留换行符？低版本如何兼容？
原生JS监听复制事件，更改复制的内容，或者在复制内容后面追加参数
原生 JS 监听 复制 copy 事件，追加版权信息：
<div class="empty-font">选中这一段文字，点击 ctrl+C 或 者右键选择复制</div>
<script type="text/javascript">
//监听整个页面的 copy 事件
document.addEventListener('copy',function(e){ // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容
let clipboardData = e.clipboardData || window.clipboardData; // 如果 未复制或者未剪切，直接 return
if(!clipboardData) return ; // Selection 对象 表示用户选择的文本范围或光标的当前位置。 // 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
let text = window.getSelection().toString(); if(text){ // 如果文本存在，首先取消默认行为
e.preventDefault(); // 通过调用 clipboardData 对象的 setData(format,data) 方法，设置相关文本 // format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型 // data 一个 DOMString 表示要添加到 drag object 的数据
clipboardData.setData('text/plain', text + '\r\n这是追加的版权内容') } }) </script>
参考