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

Question

我花了一些时间试图找出一种解决方案，可以在 HTML 中复制多行列表，从按钮 onclick 中删除标签和缩进，而无需使用 Flash。在我的研究中，我遇到了“jQuery click button copy to clipboard”，并且我测试了Alvaro Montoro's answer但该解决方案不适用于多行列表，但它适用于段落文本。我不打算支持Clipbaord API，因为它显示得很limited support跨浏览器。进一步研究，我遇到了“HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?”，塞恩的答案链接到blog post但它会复制所有 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);
});

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

Answer 1

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

您已经完成了大部分工作，您只需要 select() <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那么简单因为这使它失去了可选择的资格。您可以将其放置在屏幕之外，或遵循this answer中的详细建议。使其不可见。

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