zoukankan      html  css  js  c++  java
  • JavaScript实现点击复制按钮复制文本框的内容,兼容IOS

    <lable>
        <input type="text" id="txt">
        <a href="javascript:;" id="copy">
    </lable>
    document.getElementById('copy').onclick = function() {
          var text = document.getElementById("txt");
          text.select(); // 选中文本
          document.execCommand("copy"); // 执行浏览器复制命令
    }

    JavaScript提供了select()方法来选中文本

    JavaScript提供了execCommand("copy")方法执行浏览器的复制命令


    以上方法可能不兼容IOS,不过下面这种方法简直酷毙了~~

    引入

    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <!-- Target -->
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
    
    <!-- Trigger -->
    <button class="btn" data-clipboard-target="#foo">
        <img src="assets/clippy.svg" alt="Copy to clipboard">
    </button>

    要复制的元素设置id,给点击的元素设置data-clipboard-target属性指向要复制的元素id,也可设置data-clipboard-action="cut"选择是复制还是剪切(注:这个属性只在input和textarea上生效)

    var clipboard =  new ClipboardJS('.btn');
    
    clipboard.on('success', function(e) {
        document.getElementById('foo').blur()
    });

    js中只需要调用ClipboardJS这个构造函数,传入要点击的元素即可

    on方法传入success即为复制成功执行的代码块。

    具体详情,请查看官网http://www.clipboardjs.cn/

  • 相关阅读:
    矩阵树(Matrix-Tree)定理精华
    【面试题flex】关于弹性盒子中 flex: 0 1 auto 的一系列问题
    纯函数-Javascript
    uniapp 低功耗蓝牙使用(经典蓝牙用native.js)
    uniapp截屏
    unicloud数据聚合处理
    uniapp的post请求失效问题
    unicloud链表查询
    uni-id的使用
    坐标转换
  • 原文地址:https://www.cnblogs.com/xue-shuai/p/12000600.html
Copyright © 2011-2022 走看看