美文网首页
前端实现复制内容

前端实现复制内容

作者: 冰镇苏打水 | 来源:发表于2018-07-18 15:12 被阅读4次

前端实现复制内容

  • 将所需要的内容赋值到一个的 textarea ,然后 select() 选取内容

  • 调用 document.execCommand("copy",false,null);

  • 如果都是 input 框,可以不创建 textarea;但是很多时候不是,所以创建一个出来比较方便

  • 一直在找如何自动复制也没有实现

      <!DOCTYPE html>
      <html>
      <head>
          <title>test</title>
      </head>
      <body>
          <input type="text" name="" id="text_in" value="Copy Test.">
          <input type="button" name="" id="do_copy" value="Copy">
          <div id='test'>这是一个测试内容</div>
      
          <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
          <script type="text/javascript">
          $(function () {
              var btn = document.getElementById('do_copy'),
                  text = document.getElementById('text_in'),
                  test = document.getElementById('test');
      
              btn.onclick = function () {
                  var transfer = document.getElementById('copy_transfer');
                  if (!transfer) {
                      transfer = document.createElement('textarea');
                      transfer.id = "copy_transfer";
                      transfer.style.position = 'absolute';
                      transfer.style.left = '-9999px';
                      transfer.style.top = '-9999px';
                      document.body.appendChild(transfer);
                  }
      
                  transfer.value = text.value;
                  transfer.value = test.innerText;
                  
                  transfer.focus();
                  transfer.select();
                  document.execCommand("copy",false,null);
              }
          })
          </script>
      </body>
      </html>
    

封装过的 clipboard.js 还是很便捷的

相关文章

网友评论

      本文标题:前端实现复制内容

      本文链接:https://www.haomeiwen.com/subject/zfwopftx.html