你是不是遇到过一键复制的这种需求:

在这里插入图片描述

实现方法:

  1. 浏览器提供了 copy 命令 ,可以复制选中的内容
document.execCommand("copy")
  1. 我们需要写一个输入框,然后通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板

css部分:隐藏输入框

#copy{
    position: absolute;
    z-index: -1;
    opacity: 0;
}

html部分

 <div class="box-text2">
      	 <p class="p1">广告链接:</p>
         <p class="p2 intohrefp2">
             <input type="text" id="copy">  
             <a class="intohref" href="https://bzi.h5.xeknow.com/sl/42FB8A">等接口https://bzi.h5.xeknow12.com/sl/42FB8A</a>
         </p>
         <span class="copyhref">复制</span>
  </div>

js部分

 //点击复制
        $(".copyhref").click(function () {
            let ovalue=$(this).siblings(".p2").children(".intohref").attr("href");
            let $cppy= $("#copy")
            $cppy.val(ovalue)
            $cppy.select(); 
            document.execCommand("copy"); 
            //layer.msg('复制成功',{time:800}); 
        })
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐