zoukankan      html  css  js  c++  java
  • 复制文本的常用方法

    1.原生js,需搭配input 框使用,input 框不能hidden ,不能display:none。 可以设置成透明度为0

    var input = document.getElementById("input");
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令

    2.使用clipboard.js

     https://lib.baomitu.com/clipboard.js/2.0.6/clipboard.min.js

    
    
    <div style="text-align: center;" class="copyNbb" data-clipboard-text="复制的文本" data-clipboard-action="copy">
     </div>
    var clipboard = new ClipboardJS('.copyNbb');
          clipboard.on('success', function (e) {
            // 清除文本选中状态
            e.clearSelection();
            // layer.msg("复制成功,打开微信,粘贴搜索");
            $('.block-c').removeClass('hidden');
            $('.block-c').show();
          });
          clipboard.on('error', function (e) {
            console.log('复制失败,请手动复制打开微信,粘贴搜索');
          });

     
    clipboard.js 同时复制 文本与图片。
    用一个div 包裹住要复制的文本及内容

    <div class="copy-mb">
          <span class="layui-layer-content">
            {{form.copytext}}
            <img
              class=""
              :src="item"
              style=" 50px"
              v-for="(item , index) in form.copyImg"
              :key="index"
            /><br />
          </span>
        </div>

    然后触发代码里面加

    var clipboard = new ClipboardJS('.copyNbb', {
              target: function () {
                return document.querySelector('.layui-layer-content'); //选中那个div
              },
            });

    注意:如果是复制到微信编辑栏,图片必须为http  



    目前暂时常用这两种方式,后续有新的再做补充
  • 相关阅读:
    group_concat的长度限制
    mb_strlen默认字符集问题
    &符号导致的一个bug
    python面向对象编程系列
    python基础之面向过程编程系列
    RPA流程自动化
    什么是DevOps?
    ansible详解
    saas和paas的区别
    CPT/cpt接口
  • 原文地址:https://www.cnblogs.com/benbonben/p/15007802.html
Copyright © 2011-2022 走看看