点击按钮实现自动复制功能，解决ios不兼容问题

前言

昨天接到一个需求，实现一个推广页，其中有一个功能是点击按钮自动复制文字，看起来so easy。万万没想到，就这个自动复制功能，花费了我几个小时，接下来就是我的填坑过程，过程艰辛，结果简单。

实现原理

参考平时复制文本的思路，选中文本，ctrl+c或右键菜单复制。那么只要我们能利用js选中文本，并且能找到浏览器复制选中文字到剪贴板的调用方法，我们就能实现这个需求。

实现过程与方法

1.自己手撸js实现

html代码：

    点击复制
    

js代码:

$('#copy_wx').click(function(){
    $('#id_text').select();//选中文字
    document.execCommand('copy');//拷贝当前选中内容到剪贴板
})

发现苹果手机复制不了，用can I use查，才知道，是onselect的兼容性问题，安卓手机没有问题，但是苹果手机不兼容。

没关系，此路不通，咱可另寻出路，几番百度，终于找到选中文字的另一个方法——HTMLInputElement.setSelectionRange ，兼容性良好，就是它没错了。HTMLInputElement.setSelectionRange 方法可以从一个被 focused 的 元素中选中特定范围的内容，这个方法需要结合focus事件一起用。

$('#copy_wx').click(function(){
    var element = $('#id_text')
    element.focus();
    element.setSelectionRange(0, element.val().length);
    document.execCommand('copy');//拷贝当前选中内容到剪贴板
    element.blur();
})

除了自己手撸代码，网上也提供了另外一种可以更优雅的实现复制粘贴功能。下面我们简单介绍一下clipboard插件，以及遇到的一些问题。

2.clipboard插件实现

这是一个不需要依赖flash或者其他复杂框架的轻量插件，详细的可以参考clipboard文档

html代码：

    点击复制4


js代码:
var clipboard = new Clipboard('#btn1')
clipboard.on('success', e => {
    alert('复制成功');
});
clipboard.on('fail', e => {
    alert('复制失败');
})

非常简单好用，但开始测试时，发现有些iphone手机（如：iphone6）会复制不成功，后面改用以下方法：

    点击复制
    

复制的文字是在视图窗口可见的状态下，是可以复制成功的，但是我们的需求是希望复制的文字不需要可见的。于是又出现了新的问题，如果将input用绝对定位position: absolute;left: -9999px移出视图窗口，或者用层级position: absolute;z-index: -1;置于按钮之下，以达到文字消失的视觉效果，文字看不见了，但在一些iphone手机（如：iphone6）复制粘贴功能也没了。（说明一下：当时这个需求是在基于JQuery开发的项目中的，但后面我自己在vue脚手架的demo实验，这个问题不存在。这个问题目前我不知道是啥问题，读者如果知道的话，欢迎留言。）

莫非就没有解决方法了？不，我们还有一个比较笨的方法，我们可以将文字的颜色设置成与按钮的背景色一样，这样同样可以达到视觉不可见的效果。当然，有其他的解决方案的话，也欢迎留言。

总结

这个问题不大，但有时找不到方法的话也挺耗时的，希望这篇文章可以给某些踩坑中的同学一点帮助。