将几个项目的背景颜色复制到剪贴板[重复]

Posted 2023-03-06

【中文标题】将几个项目的背景颜色复制到剪贴板[重复]

【英文标题】：Copy several items background color to clipboard [duplicate]

【发布时间】：2019-02-18 09:29:08

【问题描述】：

我有几个 li 具有不同背景颜色的标签。 我想当用户点击每个li 标签时，获取该特定项目的背景颜色并将其复制到剪贴板。

 $('li.col').click(function () 
    var x = $(this).css('backgroundColor');
)

我该怎么做？

【问题讨论】：

不是答案，而是需要考虑的问题。你可能更适合使用clipboard.js

【参考方案1】：

到目前为止，您的方法是正确的。您可以使用30secondsofcode（我维护的一个项目/网站）中的copyToClipboard 方法来处理这个问题。来自网站：

创建一个新的<textarea> 元素，用提供的数据填充它并将其添加到 html 文档中。使用Selection.getRangeAt() 存储所选范围（如果有）。使用document.execCommand('copy') 复制到剪贴板。从 HTML 文档中删除 <textarea> 元素。最后，使用Selection().addRange() 恢复原来选择的范围（如果有的话）。

const copyToClipboard = str => 
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  if (selected) 
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  
;


$('li.col').click(function() 
  var x = $(this).css('backgroundColor');
  copyToClipboard(x);
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="col" style="background:red;">Red</li>
  <li class="col" style="background:green;">Green</li>
  <li class="col" style="background:blue;">Blue</li>
</ul>

注意：我在 Medium 上写过一篇文章，更深入地解释了这项技术。你可以阅读它here。