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/

  • 相关阅读:
    influxdb 使用
    【刷题】如何查找最长链
    学习中的开源框架和系统
    常见错误总结
    开发者必备网站
    计算机基础知识以及常用业务场景
    (1)、hive框架搭建和架构简介
    hadoop安装和配置
    linux基础
    UML学习目录
  • 原文地址:https://www.cnblogs.com/xue-shuai/p/12000600.html
Copyright © 2011-2022 走看看