5

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

还是有更有效的方法来解决这个问题？

4

3 回答 3

1

This question:

How do I copy to the clipboard in JavaScript?

...contains a fairly long discussion about copying text to the clipboard with JavaScript. The most upvoted (and in my opinion the correct) answer does not actually do the copying, but makes use of a popup to present a text box with the text already selected, allowing the user to simply CTRL+C to copy.

The reasoning behind this is because for a site to control what is on a user's clipboard can be dangerous and undesirable for the user. Understood that here you are getting the user's permission to do so, but still... If you want to take what the answer in above post suggests and apply it to your site, perhaps include a button which automatically selects the text to copy in the field next to it. For information on selecting text in a field see this post: Programmatically selecting partial text in an input field.

于 2012-12-04T12:07:26.770 回答
0

由于您似乎已经弄清楚了复制方法，并且只需要一种访问动态生成的元素的方法，请使用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");
}
于 2012-12-04T12:15:30.573 回答
0

我将插入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 的其他地方找到一些好的（跨浏览器）实现：

希望有帮助！

于 2012-12-04T12:21:51.300 回答