在jquery中复制到剪贴板[重复]答案

【问题标题】：Copy to clipboard in jquery [duplicate]在jquery中复制到剪贴板[重复]
【发布时间】：2021-04-19 16:33:13
【问题描述】：

我正在尝试复制到剪贴板。它正在处理 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 )。我该如何解决？

【问题讨论】：

请使用[<>] sn-p 编辑器在minimal reproducible example 中发布纯HTML 和JS
那么您复制的任何文本中是否包含引号？
查看生成的 HTML 并查看问题所在。

标签： javascript jquery datatables

【解决方案1】：

更改此内容不会有内容问题

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

如果你想创建一个副本，你不能在 textarea 上显示 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>

【讨论】：

感谢回复，但无法正常工作....什么都没发生
“不工作”是一个无用的评论。控制台错误？什么？显示minimal reproducible example，就像我们问的那样，我们可以更好地帮助您
我说什么都没发生。没有错误显示
@Kabir 如果我删除所有您不想向我们展示的内容并显示文本区域，则对我有用
非常感谢.......

【解决方案2】：

错误消息告诉您出了什么问题。这里缺少右括号

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

【讨论】：

还是一样的错误.....