浏览器点击复制粘贴到剪切板的解决

Posted 2021-01-06 scy152417

最近在做一个东西，需要的是复制文本里的内容

稍微研究了下关于H5的复制粘贴到剪切板的api，感觉兼容不尽人意

要么就是浏览器之间，要么就是方法需要支持https才可以，寻找了很久才找到一个符合我期许的一个插件clipboard.js

使用方法也是比较简单，直接引入js就可以使用，非常的方便快捷

1 <script type=‘text/javascript‘ src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>

然后就是在html加入相对应的属性

<p class="input_copy" data-clipboard-text="" onClick="copy_data()" id="copp">复制开票信息</p>

data-clipboard-text就是要引入的属性，里面的值就是复制到剪切板里面的东西

<script type="text/javascript">
    function copy_data()
    {
        var res_data=‘123213‘;//这里我是要获取很多copy的信息做的处理,没有可以直接用空挡下面获取单行的值
        $("#copp").attr("data-clipboard-text",res_data);

        var clipboard = new Clipboard(‘.input_copy‘).on(‘success‘, function(e) {
            var e = e || window.event;
            alert(‘复制成功‘);
        }).on(‘error‘, function(e) {});
    }
</script>

这样就成功了，ios11,安卓基本上都可以，浏览器google，360极速

暂时就这么多，记录一下