移动端web 复制到剪贴板 怎么实现？

Question

最近项目中遇到一个需求，是移动端web页面，要实现复制优惠码到剪贴板的功能。如图所示：

百度和谷歌上面搜了大半天也没找到能够解决在移动端web页面的复制到剪贴板功能。
不过PC端解决倒是不难，有一点问题就是，如果需要考虑兼容，
就需要借助flash（需要安装Flash插件）来实现，所以实际上，在苹果Safari上还是不能够实现。

因此，在移动端页面，想要借助flash实现更不可能了。

我还在想HTML5里面有没有一种剪贴板的api，结果只搜到了一个相关文章，HTML5实战与剖析之剪贴板事件

但是，我根据文章提供的方法，测试，发现还是只能在IE中有效，或许我的方法不对？以下我的测试
https://jsfiddle.net/h52L217f/embedded/result,js,html,css/

通过HTML5的 存储机制 有没有可能实现？
有人遇到过这个问题吗？
求高人解决。。。

Answer 1

去参见 http://caniuse.com/#search=clipboard 看看兼容性吧

Answer 2

基本是无通用解的。 可以换个思路，考虑一下复制到剪贴版然后黏贴到哪里使用。 使用的应用环境如果自己是可控的，能否将使用流程改造成不用复制黏贴。 比如生成二维码，又比如发送短信。在移动环境中复制黏贴其实操作很别扭的。

Answer 3

@朕知道了 问题处理了吗？

Answer 4

我也遇到过这个问题，H5，当时我是这么解决的，首先设置这个页面其他是不可选中的，只有你想被选中的是可以选择，这个用css即可，然后js使用ua去判断这个设备，安卓可以使用原来的剪贴板就可以，如果是IOS，就给显示按钮，点击按钮得到，然后去粘贴

Answer 5

用 clipboardjs 吧，https://clipboardjs.com/

Answer 6

我最近也遇到类似需求，我用的是： Clipboard.js

Clipboard.js为开发者提供了一个集成了实用的API的多功能轻量级JavaScript库，不依赖Flash

兼容性：

虽然要求Safari版本在10以上，但是作者做了很好的优雅降级：

The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.

也就是说，Safari版本是10以上的，可以直接成功复制；如果是版本小于10，可以通过如下代码提示用户手动复制：

clipboard.on('error', function(e) {
    alert('请选择“拷贝”进行复制!')
});

Safari版本在10以下的效果：

DEMO：

---

html

    <!-- Target -->
    <input id="foo"  value="http://www.968309.com/mobile.php">

    <!-- Trigger -->
    <button class="btn" data-clipboard-target="#foo">复制</button>

javascript

    //init
    var clipboard = new Clipboard('.btn');
    //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
    clipboard.on('success', function(e) {
        alert('复制成功!')
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        alert('请选择“拷贝”进行复制!')
    });

Answer 7

https://clipboardjs.com/#exam... 专治