How to Copy to the Clipboard using Javascript?

Hello All,

How to Copy to the Clipboard using Javascript?

Could you suggest a solution that works for all the browsers.

Thanks,
Jothi
JRAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Hi,

There isn't any script available to copy content to clipboard in JS for all browsers. However, using little help of flash player, you will be able to achieve this functionality.

Check- http://zeroclipboard.org
0
JRAuthor Commented:
Is there a way without using flash?
0
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Nope. Some scripts will work on IE, some on others. Only way I could find is this.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Anyways you do not need to show the flash component on form/page. It works behind the scene.
0
JRAuthor Commented:
Thanks. The flash extension should be enabled for the browser?
0
Brian TaoSenior Business Solutions ConsultantCommented:
Just curious, that the user eventually wants to paste it to somewhere else right? otherwise you wouldn't need it to be in the clipboard.
So, if the user knows how to paste it to somewhere else, why doesn't he/she know how to copy it?
0
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Yes, flash should be enabled. If it is not enabled; the js will fail.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
what about select -> save to local storage
0
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
@Brian, @Scott - This seems very stupid when someone is implementing this kind of functionalities. But that depends on requirements where the selectable area for copy paste is not accessible to the user or disabled or not selectable, formatted text, etc.

I've been through similar critics!!

All apart, we know we can achieve this functionality by various ways (we're geeks after all). When it comes to normal user the story is different. And some apps needs to run on tabs/mobile devices. It will be difficult for users to copy the content to the clipboard.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>This seems very stupid

This seems very valid to me.  Although the question is open to interpretation.  My take is you want to the user to select some text and have your app "copy" and perhaps "paste".  Without opening up some type of security or using a java applet or flash you will be able to do this.  And the javaapplet or flash will have their own security issues.

What I am suggesting is to grab selected text via js/jquery http://madapaja.github.io/jquery.selection/ then save that selected data to web/local storage to save the selected text https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API.  This works very similar to a cookie but for larger amounts of data

http://caniuse.com/#feat=namevalue-storage
http://caniuse.com/#search=localstorage
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Hi Scott,

I agree. Final decision would be of user for what he wants. And how the application functionality is required.
0
JRAuthor Commented:
Is it possible without flash usage to copy to clipboard other than IE?
0
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Hi,

Copying has been disabled in most browsers as a security risk. However if you do not target IE, check this link for point #3 mentioned as workaround. It might or might not work. http://www.sitepoint.com/jquery-copy-clipboard-4-options/
0
Brian TaoSenior Business Solutions ConsultantCommented:
@Rikin, yes you're right.
It's me being a consultant (who does everything except core development) for too long.  I always try to dig into the true reasons why our customers come out with those requirements.  Instead of taking the change request and sending them a quotation, sometimes I give them suggestions that solve their problems in a better way.

For example, if the requirement is to actually copy some data from page#1 and want to paste into page#2 (both in the same web app), Scott's solution (using sessionStorage/localStorage) is a better idea than using system clipboard.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Thank you.  

Please note, the article linked in http:/Q_28667156.html#a40759584 is old and "#3" using .live has long been depreciated.  Everything changes so fast  that I would even be suspect of an article 12 months old let alone 4years.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
JR, I requested attention from a Moderator because I didn't see an actual answer from http:/Q_28667156.html#a40758040 and I also think it is misleading where the Expert mentions, "And some apps needs to run on tabs/mobile devices."  You have a better chance of using local storage than you do with flash which is not supported on iPhone and limited support on android devices.

The answer to, "how do I copy to the clipboard" is, "You can't do that" in the traditional manner for security reasons. However, you can give the same experience and using local storage is one such way.  Here is an opensource github project that does this too http://zeroclipboard.org/

Something that is a bit confusing on this site is the "Accept" links are above the solution and not below.  I wonder if you meant to actually select comment #40758157
0
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Hi Scott,

The opensource github solution zeroclipboard you have suggested also uses flash component, that author does not want to use.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Yes, and that's why the my suggestion of using local storage is the way to go and except for opera mini, works on every other browser including ios and android http://caniuse.com/#search=localstorage
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.