zoukankan      html  css  js  c++  java
  • clipboard.js兼容ios

    再使用clipboard.js做项目时,项目需求是在非input,button等可以点击的标签(span,p,div)上实现点击来复制内容,在PC端和移动端android没问题,但是到了ios毫无反应,就是渣渣,调兼容调了好大一会儿,总算解决了这个bug,现在把方法分享给大家,

    其实不算复杂,主要是给标签添加样式,就是自己不知道ios系统的标签特性:

    一开始的html代码如下:

    <span id="foo" data-clipboard-target="#foo" data-clipboard-action="copy">哈哈,我被复制了</span>

    上面的写法,在android没问题,正常实现,ios毫无反应,修改后如下:

    <span style="cursor: pointer" onclick="" class="btn" id="foo" data-clipboard-target="#foo"  data-clipboard-action="copy" >哈哈,这下ios可以复制我了</span>

    注意给span加了一个css属性:cuosor:pointer;以及 onclick="",这个空事件,原因是ios默认非点击标签不具有点击效果,所以给这些标签添加相关属性,这样系统可以识别出来!

    js代码如下:

    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        alert('复制成功');
        e.clearSelection();                
    });
    
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
  • 相关阅读:
    js判断手机或Pc端登陆.并跳转到相应的页面
    短信接口的使用
    sql替换
    jQuery 双击事件(dblclick)
    attr 和 prop 的区别
    如何获得select被选中option的value和text
    微信公众号基本配置
    关闭当前界面
    oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
    thinkphp5 与 endroid 二维码生成
  • 原文地址:https://www.cnblogs.com/web-wjg/p/8622488.html
Copyright © 2011-2022 走看看