javascript - 将文本动态复制到表格中的剪贴板

Question

我正在制作一个网站，该网站从数据库获取数据并将其放在带有按钮的表格上，该按钮应该能够复制内容或标签。顺便说一句，我正在使用 Laravel。

这是我的代码...

HTML

<table class="table table-sm">
   <thead style="font-size: 12px;">
      <tr>
         <th scope="col">#</th>
         <th scope="col">Query</th>
         <th scope="col">Created at</th>
         <th scope="col">Copy</th>
      </tr>
   </thead>
   <tbody>
      @if(!$history_list->isEmpty())
      <p class="d-none">{{$i = 1}}</p>
      @foreach($history_list as $hl)
         <tr>
            <th scope="row">{{ $i++ }}</th>
            <td><textarea rows="8" class="querystr d-none">{{ $hl->query_text }}</textarea>{{ $hl->query_text }}</td>
            <td>{{ $hl->created_at }}</td>
            <td><button class="btn btn-primary btn-sm copybtn" style="font-size: 12px"><span class="oi oi-clipboard" title="copy" aria-hidden="true"></span> Copy</button></td></td>
         </tr>
      @endforeach
      @else
         <tr>
            <th scope="row" colspan="4">You have no queries in your history.</th>
        </tr>
      @endif
   </tbody>
</table>

JQuery...我认为

var copyQueryBtn = document.querySelector('.copybtn');
copyQueryBtn.addEventListener('click', function(event) {
  var copyQuery = document.querySelector('.querystr');
  copyQuery.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

编辑:我需要它动态工作，因为我正在从数据库获取表数据，并且我还更新了接近 this question 的代码，它仍然无法复制，并且在其他行上不起作用，我知道，因为我使用了控制台错误消息。

Answer 1

我重建了你的代码:JS:

   $(document).on('click',".copy",(ev)=>{
      let textArea = 
     ev.target.closest('tr').querySelector('.textArea');
    let selection = window.getSelection();
    let range =  document.createRange();
      range.selectNodeContents(textArea);
      selection.removeAllRanges();
      selection.addRange(range);
      console.dir( range.toString());
      document.execCommand('copy');
    })

HTML

 <table><tr>
      <td><div class="textArea" contenteditable =  "true"> </div></td>
       <td>
         create at ...
       </td>  
        <td><button class="copy">copy</button> </td>
      </tr>
    </table>

我用属性 contenteditable 将 textarea 替换为 div，并将其内容添加到选择中。 https://codepen.io/piotrazsko/pen/eejMYX如果您不想使用 jquery ，请尝试:

let allButtons = Array.from(document.querySelectorAll('.copy'));
allButtons.forEach((item)=>{
    item.addEventListener('click',(ev)=>{
       let textArea =     ev.target.closest('tr').querySelector('.textArea');
       let selection = window.getSelection();
       let range =  document.createRange();
       range.selectNodeContents(textArea);
       selection.removeAllRanges();
       selection.addRange(range);
       console.dir( range.toString());
       document.execCommand('copy');
     })
})

如果您需要使用文本区域，请尝试下一个代码:

let allButtons = Array.from(document.querySelectorAll('.copybtn'));
     allButtons.forEach((item)=>{
                   item.addEventListener('click',(ev)=>{
                    let textArea =     ev.target.closest('tr').querySelector('textarea');
                     textArea.focus();  
                      let text =  textArea.value;
                      textArea.setSelectionRange(0,text.length);                    
                      document.execCommand('copy');
    })
})