点击按钮实现自动复制功能，解决ios不兼容问题
时间：2023-04-05 02:03:50
HTML5
前言昨天接到一个实现推广页的请求。其中一个功能就是点击按钮自动复制文字，看起来好简单。没想到这个自动复制的功能竟然花了我好几个小时，接下来就是我的填表过程了。过程艰辛，结果却简单。实现原理参考复制文本通常的思路，选中文本，ctrl+c或者右键菜单进行复制。所以我们只要能用js选中文本，找到浏览器将选中的文本复制到剪贴板的调用方法，就可以实现这个需求。实现过程及方法1、手工js实现html代码：点击复制
js代码：$('#copy_wx').click(function(){$('#id_text').select();//选择文本document.execCommand('copy');//将当前选中的内容复制到剪贴板})发现苹果手机无法复制，用canIuse查看发现是一个onselect的兼容性问题，安卓手机没有问题。但是苹果手机不兼容。没关系，这条路走不通，我们可以另辟蹊径，百度了几下，终于找到了另一种选择文本的方法——HTMLInputElement.setSelectionRange，兼容性好，就是对。HTMLInputElement.setSelectionRange方法可以从获得焦点的
元素中选择特定范围的内容。该方法需要与焦点事件结合使用。$('#copy_wx').click(function(){varelement=$('#id_text')element.focus();element.setSelectionRange(0,element.val().length);document.execCommand('copy');//将当前选中的内容复制到剪贴板element.blur();})除了自己手写代码外，网上还有一个更优雅的复制粘贴功能。下面简单介绍一下剪贴板插件以及遇到的一些问题。2.剪贴板插件实现这是一个轻量级的插件，不需要依赖flash或者其他复杂的框架。具体可以参考剪贴板文档的html代码：
点击复制4 js代码：varclipboard=newClipboard('#btn1')clipboard.on('success',e=>{alert('Copysuccessful');});clipboard.on('fail',e=>{alert('Copyfailed');})非常简单易用，但是在开始测试，发现部分iphone（如：iphone6）会复制失败，于是用下面的方法代替：
