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

  • 相关阅读:
    django之快速分页
    python django 使用 haystack:全文检索的框架
    django的admin或者应用中使用KindEditor富文本编辑器
    Ubuntu安装微信
    python 基本模块
    [LeetCode] 860. 柠檬水找零 lemonade-change(贪心算法)
    [LeetCode] 455. 分发饼干 assign-cookies(贪心算法)
    [LeetCode] 122. 买卖股票的最佳时机ii best-time-to-buy-and-sell-stock-ii(贪心算法)
    [LeetCode] 225. 用队列实现栈
    [LeetCode] 155. minStack 设计最小栈
  • 原文地址:https://www.cnblogs.com/aloneCode/p/6759260.html
Copyright © 2011-2022 走看看