从数据库复制文本输出到剪贴板

Question

我有一个搜索表单，它会将每个商家的名字、电话和电子邮件地址输出到一个表格中。
我想在每个字段旁边添加一个复制按钮，以便用户可以单击它并将其复制到剪贴板中（复制时文本会被突出显示）。我的用户仅使用IE9进行浏览。

问题是可能会有多组结果，因此脚本不能像下面的文本区域那样调用特定编号的函数：

function highlightmetasearch01() {
    document.copydata01.text2copy01.select();
     document.copydata01.text2copy01.focus(); 
}
function copymetasearch01() {
    highlightmetasearch01();
    textRange = document.copydata01.text2copy01.createTextRange();
    textRange.execCommand("RemoveFormat");
    textRange.execCommand("Copy");
}

function highlightmetasearch02() {
    document.copydata02.text2copy02.select();
    document.copydata02.text2copy02.focus(); 
}
function copymetasearch02() {
    highlightmetasearch02();
    textRange = document.copydata02.text2copy02.createTextRange();
    textRange.execCommand("RemoveFormat");
    textRange.execCommand("Copy");
}

HTML：

<textarea name="text2copy01">The first textarea.</textarea>
<br />
<button onclick="copymetasearch01();return false;">COPY</button>

<textarea name="text2copy02">The second textarea.</textarea>
<br />
<button onclick="copymetasearch02();return false;">COPY</button>

我在想这是否可能？...

<td><span>Name from DB here</span> <button onclick="<!--copy and highlight text within most recent span tag-->">COPY</button></td>

<td><span>Phone from DB here</span> <button onclick="<!--copy and highlight text within most recent span tag-->">COPY</button></td>

<td>Other text here that shouldn't be highlighted or copied <span>Email address from DB here</span> <button onclick="<!--copy and highlight text within most recent span tag-->">COPY</button></td>

还有更高效的方法来处理这个问题吗？

- Zuno

---

忽略实际应用，你会喜欢一个控制你剪贴板的网站吗？我认为这样的网站很粗鲁，可能会在将来避免使用它。我还会认为，如果他们正在（尝试）这样做，他们还会在没有告知我的情况下尝试做什么其他事情。 - Ed Heal

Answer 1

这个问题：

如何在JavaScript中复制到剪贴板？

...包含了一个关于如何使用JavaScript复制文本到剪贴板的讨论。被投票最多的答案（并且在我看来是正确的答案）实际上并没有进行复制，而是利用弹出框呈现已经选择好文本的文本框，使用户只需按下CTRL+C即可复制。

这样做的原因是因为网站控制用户剪贴板上的内容可能会对用户造成危害和不必要的影响。虽然你可以在这里得到用户的许可，但还是有风险的......如果你想采用上面帖子中的答案并将其应用到你的网站上，也许可以在其旁边包括一个按钮，自动选择要复制的文本。有关在文本框中选择文本的信息，请参阅此帖子：以编程方式选择输入字段中的部分文本。

- Levi Botelho

Answer 2

看起来你已经掌握了复制方法，只需要一种访问动态生成元素的方式，使用 document.getElementById('text2copy02').createTextRange() 而不是 document.copydata02.text2copy02.createTextRange()。请参考下面的示例代码。我希望我正确理解了你的问题。

html:

<td><span id="copyMe1">Name from DB here</span> <button onclick="copyMeToClipboard('copyMe1')">COPY</button></td>

<td><span id="copyMe2">Phone from DB here</span> <button onclick="copyMeToClipboard('copyMe2')">COPY</button></td>

js：

function copyMeToClipboard(elementId) {
    document.getElementById(elementId).select();
    document.getElementById(elementId).focus(); 
    textRange = document.getElementById(elementId).createTextRange();
    textRange.execCommand("RemoveFormat");
    textRange.execCommand("Copy");
}

- user1703809

Answer 3

我建议使用jQuery作为解决方案。虽然问题中没有提到，但它可以通过使用类似CSS的选择器来轻松遍历DOM树。结合点击事件处理程序，您就可以得到“我想知道这是否可能”的解决方案：

// Give your copy buttons the "copier" class
// This will add a click event handler:
$('.copier').click(function() {
    // Find the nearest-parent td to the clicked button:
    var row = $(this).closest('td');

    // Find the first span within that td:
    var txt = row.find('span:first');

    // Do the copying:
    window.clipboardData.setData('Text', txt.text());

    // And the highlighting:
    var range = document.body.createTextRange();
    range.moveToElementText(txt[0]);
    range.select();
});

现在我把复制和高亮代码的部分省略了（编辑：除了现在我没有），因为它有点长，但是你可以在 Stack Overflow 上找到一些好的（跨浏览器）实现：

• JQuery：选择元素中的文本（类似于用鼠标突出显示）
• 使用jQuery将文本复制到客户端剪贴板

希望这能帮到你！

- Xavier Holt

---

谢谢大家，我尝试了这个方法但它不起作用。对不起，我在这方面有点新手...<script type="text/javascript"> $('.copy').click(function() { //找到最接近的父级 td： var row = $(this).closest('td'); //在该 td 中找到第一个 span： var txt = row.find('span:first'); //在这里执行复制和高亮操作... var range = document.txt.createTextRange(); range.moveToElementText(txt); range.select(); window.clipboardData.setData('txt',str); }); </script> - Zuno

@Zuno - 我更新了示例代码。由于我没有IE，因此未经测试，但它应该可以工作。这些链接示例中有一些会阻止复制粘贴的代码运行的问题：例如变量'str'对你来说不存在，并且“range.moveToElement（）”需要本机DOM节点，而不是其jQuery包装器（方括号取消包装）。 - Xavier Holt

非常感谢，但我觉得我在这里有点傻。将 .copier 更改为 .copy 并使用您上面的代码与此 HTML，但没有效果：<td><span><?php echo $Name; ?></span> <button class="copy">COPY</button></td> - Zuno

@Zuno - 嗯。看起来不错...你确定在事件绑定脚本运行时按钮已经存在吗？如果不存在，将其移到文件底部或将其包装在$(document).ready(function() { /* 在这里执行！ */});中。 - Xavier Holt

我应该在这里引用一个jQuery库吗？我问这个问题是因为我已经尝试了几乎所有可能的方法。我把脚本放在顶部、底部，让它在搜索结果生成时生成（在顶部和底部），然后按照您的建议更改了脚本并重复了这些测试。所有这些，在按钮点击时都没有任何反应。 - Zuno

我现在使用谷歌的CDN包含了jQuery。只有在将其与搜索结果一起输出时，我才能让jQuery正常工作 - 但是这样做会导致jQuery上面的任何内容都不会显示出来。在结果上面有一个行为类似于display:none的搜索表单。表单的HTML代码在源代码中，但搜索结果被输出到其上方，好像它不存在一样。已尝试使用您提供的两种方法。如果我将查询放在页面底部（静态），当进行搜索时，我会得到一个完全空白的页面。jQuery正在删除其上面的所有内容。 - Zuno