移动端的复制按钮，

最新推荐文章于 2023-05-10 13:50:03 发布

King_flag

最新推荐文章于 2023-05-10 13:50:03 发布

阅读量9.4k

点赞数 2

分类专栏：前端文章标签： html 移动端移动 javascript

本文链接：https://blog.csdn.net/King_flag/article/details/52058010

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天公司让做一个可以在移动端复制某区域的文字，是点击一个按钮达到复制效果，本人比较菜，搞了一下午，由于原生的JS是有提供一个函数来实现这个功能(window.clipboardData)，但是很遗憾，这个函数仅仅支持IE和FF浏览器，所以基本用处不大，今天我就掉进这个坑里，爬了好长时间。无意间看到clipboard.js这个库，有cdn，我比较懒，就直接复制github上的地址CDN Providers
Zeno Rocha edited this page on 21 Jun · 9 revisions
Pages 5
Home
CDN Providers
Guides
Known Issues
Known Limitations
Clone this wiki locally

```
https://github.com/zenorocha/clipboard.js.wiki.git
Clone in Desktop
This library is hosted by few different CDN providers. Go ahead and choose your favorite :)

jsDelivr

**<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>**
cdnjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
RawGit

为了让大家方便实验，我将原作者的代码改成方便使用的代码，将代码复制后保存成html文件就可以使用;

很抱歉，有网友反映这个demo在移动端不能实现复制，昨晚上我试了一下，真的不能在移动端实现复制，实验的时候我只是利用谷歌模拟的移动端设备，给大家造成错误引导，对不起大家了，如果谁有比较好的方法拿出来和大家分享一下吧。（2016-09-10）

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  
    <title>移动端复制到剪贴板！</title>  
</head>  
<body>  
<p>哈哈<span id="target">你没看错，就是复制的这里</span></p>  
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">  
    复制按钮  
</button>  
  
</body>  
<script>  
    $(document).ready(function(){  
        var targetText=$("#target").text();  
        var clipboard = new Clipboard('#copy_btn');  
  
        clipboard.on('success', function(e) {  
            console.info('Action:', e.action);  
            console.info('Text:', e.text);  
            console.info('Trigger:', e.trigger);  
            alert("复制成功");  
  
            e.clearSelection();  
        });  
    });  
</script>  
</html>

可以直接在移动端使用，代码中我使用了两个cdn，需要上网才能使用。

King_flag

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
9
评论
移动端的复制按钮，

今天公司让做一个可以在移动端复制某区域的文字，是点击一个按钮达到复制效果，本人比较菜，搞了一下午，由于原生的JS是有提供一个函数来实现这个功能(window.clipboardData)，但是很遗憾，这个函数仅仅支持IE和FF浏览器，所以基本用处不大，今天我就掉进这个坑里，爬了好长时间。无意间看到clipboard.js这个库，有cdn，我比较懒，就直接复制github上的地址CDN Prov
复制链接

扫一扫