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

Question

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

问题是可能有不止一组结果，所以脚本不能像我在下面使用 textarea 所做的那样调用特定编号的函数：

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>

或者有没有更有效的方法来解决这个问题？

Answer 1

这个问题：

How do I copy to the clipboard in JavaScript?

...包含一个关于使用 JavaScript 将文本复制到剪贴板的相当长的讨论。最受好评（在我看来是正确的）答案实际上并没有进行复制，而是利用弹出窗口显示一个带有已选择文本的文本框，允许用户简单地 CTRL+C 进行复制。

这背后的原因是，网站控制用户剪贴板上的内容可能是危险的，并且对用户来说是不受欢迎的。了解到您在这里获得了用户的许可，但仍然......如果您想采用上述帖子中的答案并将其应用到您的网站，也许包括一个自动选择要复制的文本的按钮旁边的字段。有关在字段中选择文本的信息，请参阅此帖子：Programmatically selecting partial text in an input field。

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");
}

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();
});

现在我留下了副本和突出显示代码（编辑： 除了现在我没有），因为它有点长，但你可以在其他地方找到一些好的（跨浏览器）实现关于堆栈溢出：

• JQuery: Selecting Text in an Element (akin to highlighting with your mouse)
• Copy text to the client's clipboard using jQuery

希望有帮助！