Question

您能否请一看这个演示，让我知道为什么我点击td时无法复制之前的.btn-copy文字？

$('.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');，但是你的文字没有正确选择，这应该解决它：

＆＃13;

$('.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);
   }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

    $('.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);
   }
});

Example

Answer 3

据我所知，

  document.execCommand('copy');

出于安全原因，

很久以前就停止了所有主流浏览器的工作。

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

3 个答案: