CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6330

Copying to clipboard from table td is not working

I am working on the below code. Why am I not able to copy previous td text on clicking on .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>

Upvotes: 3

Views: 4135

Answers (3)

Andr&#233;s Andrade
Andr&#233;s Andrade

Reputation: 2223

jQuery select method only works with <input> fields and <textarea>. You need to use DOM Range methods instead:

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

Upvotes: 1

Neil
Neil

Reputation: 14313

You can still use document.execCommand('copy');, but your text isn't selecting properly, this should fix it:

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

Upvotes: 2

Daniel AG
Daniel AG

Reputation: 350

As far as I know,

  document.execCommand('copy');

stopped working on all major browsers long time ago for security reasons.

Upvotes: 0

Related Questions