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

现在我离开副本并突出显示代码（编辑：除了现在我没有），'因为它有点长，但你可以在其他地方找到一些好的（跨浏览器）实现在Stack Overflow上：

希望有所帮助！

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

3 个答案: