怎么实现移动端的复制粘贴以及兼容性?

//html
<input id="inviteLink1" type="text" value="http:www.66ddcc.cn/user/invite?uid=15467789331"/>
<button class="inviteBtn1" data-clipboard-action="copy" data-clipboard-target="#inviteLink1">复制分享</button>

//js
$('.inviteBtn1').on('tap', function() {
    try {
        if(window.clipboardData.setData('Text', $('#inviteLink1').val())){
            alert('复制成功1');
        }else{
            alert('您的浏览器不支持,请选择“拷贝”进行复制1');
        }
    } catch(e1) {
        try {
            var clipboard = new Clipboard('#inviteBtn1');
            clipboard.on('success', function(e) {
                e.clearSelection();
                alert('复制成功!2')
            });
            clipboard.on('error', function(e) {
                alert('您的浏览器不支持,请选择“拷贝”进行复制2');
            });
        } catch(e2) {
            inviteLink1.select();
            document.execCommand('copy');
        }
    }
});

据我所知有这三种方法其他的方法不清楚了,第一种方法兼容性好像不好,第二个插件总是提示Clipboard is not define,总是没有定义我也不太清楚,第三种在安卓下试了几个浏览器没有太大问题,但是ios下没有效果。

有没有能够兼容安卓和ios的复制粘贴功能,或者第二种方法该怎么解决?
如果不直接复制到粘贴板,该怎么打开浏览器自带的复制菜单,自动框选后让用户点击复制。

阅读 3.7k
2 个回答

使用相关插件实现简便快捷,如果有不能实现的方法搜寻其他插件或为平台不支持

之前用的clipboard一个版本不知道为什么new实例的时候回报错,后面换了一个版本可以了。

这个插件可以解决大部分浏览器的复制了,这个东西可能本来就不是完全性的可能还是有些让用户去手动复制吧/

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题