移动端点击按钮复制链接

项目需求:移动端添加按钮功能选择要复制的链接在其他地方时用:

调研了下 

function initcopyContent() {
var _btn = $(".copy-button");
_btn.on('click',function () {
var _this = $(this);
_this.prev().select();
document.execCommand("Copy");
})
}
initcopyContent();
链接在input内 点击按钮 获取值复制,说是这种方法只用于ie浏览器,但是在移动端(andord)分别测试了UC、QQ、和微信浏览器是可以使用的(有兴趣的可以试下),还有个但是ios是不行的。
最后只能用插件,有几款可以使用的插件:
ZeroClipboard 使用flash优雅降级 果断放弃
Clipboard 比较好 很轻量 项目中就一个页面使用这个功能 兼容性还可以(一些低版本Safari浏览器不行)
最后决定使用它,从GitHub下载代码放到服务器,引入调用,添加功能,OK
有些坑:
教程都是只给一个按钮添加事件(继承),我用到了四个按钮,觉得写4次不太可能,以为这四个按钮的链接都是php循环渲染出来的所以只能动态的添加,官网有类似的教程:"

  通常,我们需要提取与您的选择器相匹配的所有元素,并为每一个绑定事件侦听器。但是如果你匹配了上百个元素,这个操作会消耗大量的内存。

  因为这个原因,我们使用 event delegation ,这样仅需使用一个事件监听就可以代替上面说的上百个事件监听。 查看: #perfmatters."

  但是链接不能用所以只能:

var num = 1;
$(".copy-button").each(function () {
var clipboard = {};
clipboard[num] = new Clipboard('.copy-button' + num);
clipboard[num].on('success', function(e) {
$.dialog.successTips('复制成功!');
e.clearSelection();
});
clipboard[num].on('error', function(e) {
$.dialog.successTips('请选择“拷贝”进行复制!');
});
num ++;
})
比较low的方法弄了(本身是很不想写这个功能这是有多懒非得需要个按钮很烦,按钮也不是很多就这样写了,页面加载内容不是很多就这样了,可以优化)
还有个就是兼容问题5s自带的浏览器不支持 6s没问题,别的也没测我又不是测试(呵呵,会被打死!)
对了还有就是ios选择后没有交互效果,在pc 和 android 是有交互效果的(类似选中状态)ios缺没有就给添加了个提示(封装好的$.dialog提示)

posted @ 2017-04-24 21:40  一条腿的凳子  阅读(2770)  评论(0编辑  收藏  举报