Geek Answers Handbook

Copy to clipboard text from database

I have a search form that displays the merchant data (each seller’s name, phone number, email address) in a table.
I am looking for a copy of the button next to each of these fields so that users can click on it and copy it to the clipboard (the text will be highlighted when copying). My users will only view IE9.

The problem is that there can be more than one set of results, so the script cannot call a specific numbered function, as I did with the text area 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 is 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?

+4
source share
3 answers

This question:

How to copy to clipboard in javascript?

... contains a rather lengthy discussion about copying text to the clipboard with JavaScript. The most correct answer (and, in my opinion, the correct one) does not actually copy, but uses a popup to represent a text field with already selected text, allowing the user to simply copy CTRL + C.

The rationale for this is that in order for the site to be able to control what is in the user clipboard, it can be dangerous and undesirable for the user. I realized that here you get the user's permission to do this, but still ... If you want to accept what the answer offers in the above message and apply it to your site, you may include a button that automatically selects the text to copy in the next with him. For information on selecting text in a field, see this post: Programmatically select partial text in an input field .

+1
source

Since it seems like you have a copy method and you need a way to access elements that are generated dynamically, use document.getElementById('text2copy02').createTextRange() instead of document.copydata02.text2copy02.createTextRange() . See sample 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"); }
0
source

I am going to plug in jQuery as a good solution to your problem. I know this is not mentioned in the question, but it moves the DOM tree very easily, allowing you to use the CSS style selector. Combine this with the click event handler and you get your "I was wondering if this is possible?" Decision:

 // 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 a copy and selected the code ( edit:, but now I didn’t), because it is a little long, but you can find good (cross-browser) implementations elsewhere when the stack overflows:

Hope this helps!

0
source

More articles:


All Articles