Copy to clipboard text output from database

Question

I have a search form that outputs merchant details (each merchant's name, phone, email address) into a table.
I'm looking to have a copy button next to each one of these fields so users can click on it and copy it to their clipboard (the text gets highlighted when copied). My users will be browsing with IE9 only.

The problem is that there may be more than one set of results, so the script cannot call a specific numbered function like I have done with textarea's below:

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>

I was wondering if this would be possible? ...

<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>

Or is there a more efficient way to approach this?

Answer 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.

Answer 2

Since it seems like you have the copying method figured out and just need a way to access elements that are dynamically generated, use document.getElementById('text2copy02').createTextRange() instead of document.copydata02.text2copy02.createTextRange(). See the example code below. I hope I understood your problem correctly.

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

I'm going to plug jQuery as a good solution to your problem. I know it's not mentioned in the question, but it makes traversing the DOM tree really easy by letting you use CSS-style selectors. Combine this with a click event handler and you get your "I was wondering if this would be possible?" solution:

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

Now I left the copy and highlight code out (edit: except now I didn't), 'cause it's a little long, but you can find some good (cross-browser) implementations elsewhere on Stack Overflow:

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

Hope that helps!