zoukankan      html  css  js  c++  java
  • 移动端点击按钮复制链接

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

    调研了下 

    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提示)

  • 相关阅读:
    Lucene全文检索
    数据库设计样例
    tortoisegit 保存用户名密码
    ServletContextListener 解析用法
    !! 浅谈Java学习方法和后期面试技巧
    佳能2780打印机老出5100错误
    蓝屏
    股市口诀
    如何准确进行T+0操作
    通达信:显示K线图日期
  • 原文地址:https://www.cnblogs.com/aloneCode/p/6759260.html
Copyright © 2011-2022 走看看