在 jquery 中复制到剪贴板

Question

我正在尝试复制到剪贴板。它在 div 元素上工作，但如果我在数据表中使用它那时候不工作

这是我的代码

->editColumn('value', function ($data) {
            return '<span>'.$data->value.'</span> <i class="fa fa-copy" title="Copy to Clipboard" data-toggle="tooltip" onclick="copyToClipboard(this,'.$data->value.')"></i>';
        })

  function copyToClipboard(em,text) {
            var dummy = document.createElement("textarea");
            dummy.style.display = 'none'
            document.body.appendChild(dummy);
            dummy.value = text;
            dummy.select();
            document.execCommand("copy");
            document.body.removeChild(dummy);
            $(em).attr('data-original-title', 'Copied')
                .tooltip('fixTitle')
                .tooltip('show');
        }

它在参数列表之后显示 Uncaught SyntaxError: missing ) 。我该如何解决？

Answer 1

错误消息告诉您哪里出了问题。这里少了一个右括号

->editColumn('value', function ($data) { return '<span>'.$data->value.'</span> <i class="fa fa-copy" title="Copy to Clipboard" data-toggle="tooltip" onclick="copyToClipboard(this,'.$data->value.')"></i>'; })

Answer 2

改成这样不会有内容问题

->editColumn('value', function ($data) {     
  return '<span>'.$data->value.'</span> <i class="fa fa-copy" title="Copy to Clipboard" data-toggle="tooltip"></i>';
  })

使用

$('.fa-copy').on('click', function() {
  copyToClipboard(this,$(this).prev().text());
})

如果要创建副本，则不能在文本区域上显示 none

$('.fa-copy').on('click', function() {
  const text =  $(this).prev().text();
  console.log(text)
  copyToClipboard(this, $(this).prev().text());
})

function copyToClipboard(em, text) {
  var dummy = document.createElement("textarea");
 // dummy.style.display = 'none'; // cannot be display none
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
//  document.body.removeChild(dummy);
//  $(em).attr('data-original-title', 'Copied')
//    .tooltip('fixTitle')
//    .tooltip('show');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" >
<span>Data value from span</span> <i class="fa fa-copy" title="Copy to Clipboard" data-toggle="tooltip"></i>

在 jquery 中复制到剪贴板

Copy to clipboard in jquery

javascript

jquery

datatables