原生js实现点击复制到剪切板，兼容ios苹果iphone方法

港控/mmm° 2023-10-08 22:12 11阅读 0赞

![6b680205f89c1ef440bec0476da31c6f.png][]

前端页面要复制的内容在input输入框或者textarea文本框内，实现点击文本框将内容复制到剪切板或者点击按钮将其复制到剪切板。 效果图如下，那要怎么实现呢？

![64943fe97a7b4df0b137032aa901ffef.jpeg][]

### 第一种方法：不兼容ios ###

使用原生的execCommand函数命令进行复制

<textarea type="text" id="test1" onclick="copy_1(this)" >点击我就能复制我1</textarea>
    
    function copy_1(obj){
        //使用自带的select方法
        obj.select();
        if (obj.value != ''){
            document.execCommand("copy"); 
            obj.blur();//取消光标选中状态
            alert("复制成功！");
        }
    }

因为select只支持input和textarea，所以上面方法只能复制input和textarea标签内的内容。如果需要复制其他标签里的内容，可拿input或者textarea当中介。

如下所示：

<button type="button" id="test2" onclick="copy_2()" >复制</button>
    
    function copy() {
        // input充当中介
        let agent = document.createElement('input');
        document.body.appendChild(agent);
        agent.value = "这里是想要复制的内容2";//可其他标签的内容
        agent.focus();
        agent.select();
        document.execCommand('copy');
        agent.blur();//取消光标选中状态
        alert("复制成功！");
        document.body.removeChild(agent); 
        }

因为动态创建了一个input，所以为了不影响界面美观，我们需要设置css将其隐藏。

注意： input 和 textarea 不能用display:none 或者hidden或者设置width、height方式隐藏，因为会出现无法选中复制不到数据。另外需要复制多行文本的话，那么中介只能是textarea，做法和input相同。如需了解更多execCommand方法相关用法，可以参考[JavaScript execCommand函数][JavaScript execCommand]。

但要明白一点，execCommand('copy')是不适用于ios的 ，比如苹果系统自带的Safari浏览器复制后就没有效果，网上的方法都大同小异但都不适用于ios。

### 第二种方法适配ios复制的方法 ###

getSelection() 方法可以返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。通过它可实现复制，并且它对标签没有限制，可从任意标签获取内容并复制。

<p><span id="text">我是需要复制的文本内容3</span></p>
    <button type="button" id="test3" onclick="copy_3()" >复制</button>
    
    function copy_3() {
    
            const range = document.createRange();
            range.selectNode(document.getElementById('text'));
            const selection = window.getSelection();
            //移除之前选中内容
            if (selection.rangeCount>0) selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand('copy');
            alert("复制成功！");
            selection.removeAllRanges()
    
        }

其中Window.getSelection()也可以使用 Document.getSelection()代替，两个方法等价。这种方法不仅能**兼容ios**复制文本，更不错的是在PC端还能直接**复制图片**，比如点击复制后，可以将图片粘贴到微信聊天界面。

[6b680205f89c1ef440bec0476da31c6f.png]: https://img-blog.csdnimg.cn/img_convert/6b680205f89c1ef440bec0476da31c6f.png
[64943fe97a7b4df0b137032aa901ffef.jpeg]: https://img-blog.csdnimg.cn/64943fe97a7b4df0b137032aa901ffef.jpeg
[JavaScript execCommand]: https://link.zhihu.com/?target=https%3A//www.w3cschool.cn/javascript/javascript-execcommand.html