从表 td 复制到剪贴板不起作用

Question

我正在处理下面的代码。为什么我无法在单击.btn-copy时复制以前的td文本？

$('.btn-copy').on('click', function(){
$(this).closest('td').prev('td').select();
    try {
       var successful = document.execCommand('copy');
      if(successful) {
        $('.res').html("Coppied");
      }
       else
       { $('.res').html("Unable to copy!");} 
   } catch (err) {
      $('.res').html(err);
   }
});

table{border:1px solid #ccc;}
td{border:1px solid #ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="res"></div>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Copy</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer 1

您仍然可以使用 document.execCommand('copy'); ，但您的文本选择不正确，这应该可以修复它：

$('.btn-copy').on('click', function(){
  element = $(this).closest('td').prev('td')[0];
  var selection = window.getSelection();        
  var range = document.createRange();
  range.selectNodeContents(element);
  selection.removeAllRanges();
  selection.addRange(range);
  //Losely basd on http://stackoverflow.com/a/40734974/7668911
    try {
       var successful = document.execCommand('copy');
      if(successful) {
        $('.res').html("Coppied");
      }
       else
       { $('.res').html("Unable to copy!");} 
   } catch (err) {
      $('.res').html(err);
   }
});

table{border:1px solid #ccc;}
td{border:1px solid #ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="res"></div>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Copy</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td><button class="btn btn-default btn-copy">Copy</button></td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer 2

jQuery select方法仅适用于<input>字段和<textarea>。您需要改用 DOM 范围方法：

    $('.btn-copy').on('click', function(){
    try { 
       var cell = $(this).closest('td').prev('td')[0];
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(cell);
       selection.removeAllRanges();
       selection.addRange(range);
       var successful = document.execCommand('copy');
       if(successful) {
            $('.res').html("Coppied");
       }
       else
       { 
            $('.res').html("Unable to copy!");
       } 
   } catch (err) {
       $('.res').html(err);
   }
});

例

Answer 3

据我所知，

  document.execCommand('copy');

出于安全原因，很久以前就停止了在所有主要浏览器上的工作。