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

Question

我花了一些时间试图找到一种解决方案，该解决方案可以在 HTML 中复制多行列表，在不使用 Flash 的情况下从按钮 onclick 中删除标签和缩进。在我的研究中，我有运行横跨“jQuery click button copy to clipboard" and I have tested Alvaro Montoro's answer but the solution doesn't work on a multi-line list but it works great for paragraph text. I do not intend to support Clipbaord API because it shows very limited support across browsers. Researching further I ran across "HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?" and Thayne's answer links to a 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+、Chrome43+、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 那样简单，因为这使它无法 select-able。您可以将其放置在屏幕外，或按照 this answer 中的详细建议使其不可见。

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

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

jQuery copy multi-line list to clipboard

clipboard

jquery

copy

twitter-bootstrap-3