Link - copy information to clipboard

Question

I tried finding information on this and there is a lot of it but nothing dealing with this particular issue.

I have our company GUI and we need to make it so that when you click on the customer's name it copies the "phone number" to clipboard.

I am not sure how to go about doing that. The name displayed is just the customers name but I need the phone number associated with it to be "copied to clipboard" when just clicking on the customer's name.

Right now we have it set up as a click-to-call for our old VoIP. phone number information - text dispalyed is customers name.

Any ideas on how to get a particular field of information "Copied to clipboard" just by clicking on the customer's name.

possible duplicate of [How can I copy to clipboard in HTML5 without using flash?](http://stackoverflow.com/questions/26336138/how-can-i-copy-to-clipboard-in-html5-without-using-flash) — Shrinivas Shukla, Jul 21 '15 at 13:42
@Kevinj87 Take a look at [this](http://www.htmlgoodies.com/html5/other/working-with-clipboard-apis-in-html5-web-apps.html#fbid=W4qPrRYxkYI). — Shrinivas Shukla, Jul 21 '15 at 13:43

score 0 · Answer 1 · answered Jul 21 '15 at 14:10

I don't know how your html is set up but you could set it up like this and use document.execCommand('copy') to copy to the clipboard.

// our hidden textarea, where we pass the text which we want to copy, to
var copyarea = document.createElement("textarea");
copyarea.style.cssText = 'position:absolute; left: -1000px; top: -1000px;';

function copyPhoneNumber(text) {
    document.body.appendChild(copyarea);
    copyarea.value = this.dataset.phone;
    copyarea.select();
    document.execCommand('copy');
    document.body.removeChild(copyarea);
};

var customers = document.querySelectorAll(".customer");
for(var i = 0; i < customers.length; i++) {
    customers[i].addEventListener("click", copyPhoneNumber);
}

.customer { color: blue; text-decoration:underline; }
.customer:hover { text-decoration:none; cursor:pointer }

Just click on a name <span class="customer" data-phone="123">Name 1</span>
<span class="customer" data-phone="234">Name 2</span>
<span class="customer" data-phone="345">Name 3</span>

You can further improve this by feature-detecting the document.execCommand('copy') and falling back to different methods for copying if it is not available.

Link - copy information to clipboard

1 Answers1