Question

我花了一些时间试图找出一个解决方案，该解决方案可以复制HTML中的多行列表，从按钮上删除标签和缩进，而无需使用Flash。在我的研究中，我遇到过＃34; jQuery click button copy to clipboard＆＃34;我已经测试了Alvaro Montoro's answer，但解决方案并不适用于多行列表，但它适用于段落文本。我不打算支持Clipbaord API，因为它在浏览器中显示非常limited support。进一步研究我跑过＆＃34; HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?＆＃34;和Thayne回答了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);
});

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

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而不是使用正则表达来构建你的列表。

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

1 个答案: