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

  • 相关阅读:
    Windows 科研软件推荐
    有关Python 包 (package) 的基本知识
    《Using Python to Access Web Data》Week4 Programs that Surf the Web 课堂笔记
    Coursera助学金申请模板
    《Using Databases with Python》 Week2 Basic Structured Query Language 课堂笔记
    Jupyter 解决单个变量输出问题
    解决 pandas 中打印 DataFrame 行列显示不全的问题
    《Using Python to Access Web Data》 Week3 Networks and Sockets 课堂笔记
    缓存击穿及解决方案
    jvm垃圾收集器
  • 原文地址:https://www.cnblogs.com/aloneCode/p/6759260.html
Copyright © 2011-2022 走看看