复制文本的常用方法

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="width: 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  



目前暂时常用这两种方式,后续有新的再做补充
posted @ 2021-07-13 18:12  BenBonBen  阅读(324)  评论(0编辑  收藏  举报