jQuery将多行列表复制到剪贴板

Question

我花了一些时间试图找出一个解决方案,该解决方案可以复制HTML中的多行列表,从按钮上删除标签和缩进,而无需使用Flash.在我的研究中,我遇到了" jQuery单击按钮复制到剪贴板 ",我测试了Alvaro Montoro的答案,但该解决方案不适用于多行列表,但它适用于段落文本.我不打算支持Clipbaord API,因为它显示了跨浏览器的非常有限的支持.进一步研究我遇到了" HTML5替代基于闪存的ZeroClipboard以便安全地将数据复制到剪贴板？ "而Thayne的答案链接到博客文章但它会复制所有的HTML.我已经弄清楚如何剥离标签和缩进:

HTML:

<button onclick="copyToClipboard('#therecipe')">Copy List</button>
<div class="listing">
    <ul id="someList">
        <li>1 million</li>
        <li>Monday</li>
        <li>Something</li>
        <li>Foobar</li>
        <li>1tsp blah</li>
    </ul>
</div>

<textarea class="auto"></textarea>

jQuery的:

$('button').click(function(element) {
    var thelist = $('#someList').html();
    thelist = thelist.replace(/\s+<li>/g, '');
    thelist = thelist.replace(/<\/?li>/g, '\r');
    $('.auto').val(thelist);
});

如何使用jQuery复制多行列表项,删除标签,删除缩进,并在不使用Flash的情况下复制到剪贴板？是否有支持我没有看到的所有最新浏览器的插件？

Answer 1

注意：此解决方案适用于 IE10+、Chrome 43+、Opera 29+ 和 Firefox 41+。不适用于 Safari！

您已经完成了大部分工作，只需使用select()then<textarea>将document.execCommand('copy')其加载到剪贴板中即可。

var copyTextarea = document.querySelector('.auto');

$('button').click(function(element) {
  var thelist = $('#someList').html();
  thelist = thelist.replace(/\s+<li>/g, '');
  thelist = thelist.replace(/<\/?li>/g, '\r');
  $('.auto').val(thelist);
  copyTextarea.select();
  document.execCommand('copy');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Copy List</button>
<div class="listing">
  <ul id="someList">
    <li>1 million</li>
    <li>Monday</li>
    <li>Something</li>
    <li>Foobar</li>
    <li>1tsp blah</li>
  </ul>
</div>
<textarea class="auto"></textarea>

这<textarea>是必需的，但您可以使用 CSS 隐藏它。它不会那么简单，display:none因为这使它失去了可选择的资格。您可以将其放置在屏幕之外，或者按照此答案中的详细建议使其不可见。

额外的间距来自 HTML 缩进，您可以使用它来摆脱它String.prototype.trim()，但理想情况下我会通过遍历 DOM 而不是使用正则表达式来构建列表。