前端实现复制内容

2018-07-18 本文已影响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 还是很便捷的

猜你喜欢

热点阅读