Copy to clipboard using Javascript

Question

1.00/5 (3 votes)

See more:

Hi All,

I have a hidden field as below.

<input id="hdnKopierModtagere" class="hdnKopierModtagere" type="hidden" runat="server" />

The value of this field is set in the code-behind.

On clicking a button, i have to copy the text from the hidden control to the clipboard.

I have searched in google a lot, but most of them recommend to use Flash or ZeroClipboard. But I can't use this.

I need a pure javascript to copy the text to the clipboard and it should be supported in following browsers (IE, Mozilla and Chrome). Kindly advice me know how to proceed.

Thanks in advance.

Posted 3-Aug-15 5:27am

nimalan sivakumar

Add a Solution

Comments

Richard MacCutchan 3-Aug-15 11:42am

You cannot use the clipboard in Javascript. It belongs to the client.

nimalan sivakumar 3-Aug-15 11:45am

Thanks for your reply. My question is I want to copy the text in hidden control to the Clipboard.

Richard MacCutchan 3-Aug-15 11:57am

You already said that, and I told you why you cannot. The clipboard belongs to the client, and if your web page starts dumping things in it you may destroy hours of their work. There are other ways to save information on the client: session variables, cookies etc. You need to follow the protocol, not try to break it.

nimalan sivakumar 3-Aug-15 12:09pm

My purpose is, after the clicking the button, the user can paste the copied text in notepad or MS word. Therefore session variables and cookies doesnt serve my purpose

Richard MacCutchan 3-Aug-15 12:13pm

Well you still can't do it.

ZurdoDev 3-Aug-15 12:22pm

Sure you can. In IE at least.

Richard MacCutchan 3-Aug-15 12:25pm

Would be better if you posted the solution for OP.

F-ES Sitecore 3-Aug-15 11:43am

I googled and instantly found lots of code examples that don't mention flash or zeroclipboard. What have you tried and what exactly is the problem? Just in case your question isn't what you've asked but is actually "how do I do this without a security warning" then the answer to that is that you can't - those warnings are there for a reason and would be useless if you could just circumvent them.

nimalan sivakumar 3-Aug-15 11:53am

Hi,

On the click of button, i am calling the following javascript function.

function CopyToClipboard() {
var textcopy = document.getElementById("<%=hdnKopierModtagere.ClientID%>").value;
var textArea = document.createElement("textarea");

textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;

// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';

// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;

// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';

// Avoid flash of white box if rendered for any reason.
textArea.style.background = 'transparent';

textArea.value = textcopy;
document.body.appendChild(textArea);

textArea.select();

try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
alert('Copying text command was ' + msg);
} catch (err) {
alert('Oops, unable to copy');
}
document.body.removeChild(textArea);
}

It is not working in Mozilla.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-08-03T07:30:00

Solution 1

Look at any code sample in any CodeProject article or answer. You will see "Copy code" anchors over the right top corner of each code ("<pre>") element. Click at this anchor and see what it does. I suggest you do exactly the same thing. It helps the reader to easily copy the text in the clipboard in a non-intrusive manner, in contrast to what you are trying to do.

—SA

Posted 3-Aug-15 7:30am

Sergey Alexandrovich Kryukov

Comments

nimalan sivakumar 4-Aug-15 2:29am

Thanks for your reply. In the sample which you have mentioned, the user has to do the copy using Ctrl+C.
But for my scenario, the clciking of button should automatically copy the text.

Sergey Alexandrovich Kryukov 4-Aug-15 2:35am

No, it shouldn't. And this is not a "reply", this is a solution.
—SA

nimalan sivakumar 4-Aug-15 3:03am

In the solution you have mentioned, on the click of "Copy code", a new window is opened which displays the text. From there the user has to manually copy the code using "Ctrl+C"

Sergey Alexandrovich Kryukov 4-Aug-15 3:25am

I mean the same thing Richard MacCutchan told you in his comment to the question. If you could do it, it could be too intrusive, because the user could have saved in clipboard something else, which could be lost. Reasonable users do want to press on Ctrl+C Ctrl+Insert (same thing), or menu item...
—SA