Copy / Paste in JavaScript?

Question

I know that this question was asked as a million times, but I could not find a suitable modern solution.

I have implemented my own menu to provide the user with the ability to cut, copy and paste into my WebApp. But I'm not sure how to work with the clipboard in Firefox, IE, Safari / Chrome.

Thank you for your help.

Answer 1

tried: http://ericphan.info/development/cross-browser-copy-and-paste-with-jquery-copy/

UPDATE: the link is not available, so I copy the contents from the cache:

Scenario

I was working on a client project for SSW when a client reported an error in a web application.

The error is related to the dynamically created mailto link, which was updated when several employees were selected. The client reported an error when they selected more than 10 employees to send by email. His Lotus Notes mail client encountered an error:

Error processing command line arguments

Checking this, I found that Outlook 2007 can easily support emails from 30-40 employees before the mailto link stops working. Cause

It turns out that the mailto specification has a limit, and mail clients also have a limit. Lotus Notes processes only 240 characters in mailto link and other modern email clients such as Outlook 2007, supports 2083 characters - maximum URL length

This explains the inconsistency in testing. Fix - jQuery for salvation

Since this is a limitation of the HTML specification, we need another solution to meet customer requirements: “I want to be able to select multiple employees and send them to all users”

We could create an email form that used SMTP to send email, but the client wanted to use Lotus Notes as their email client.

In the end, we changed the "Email" button to copy all emails (separated by commas) to the clipboard and opened a new email window. The whole client had to press CTRL + V and paste the emails in the TO field. It was the fastest and most economical solution, which gave the client the flexibility to use his own mail client.

There is a jQuery plugin called jquery.copy that provides cross-browser copy and paste using the flash (swf) file. This is similar to how the syntax shortcut works on my blog.

After linking to the jquery.copy.js file, all you need to do to paste the data into the clipboard is as follows:

$.copy("some text to copy"); 

Nice and easy;)

Note: you may need to change the path to the SWF file in jquery.copy.js to make this work

Answer 2

I just wrote a detailed technical blog post on this subject (I work for Lucidchart, and we recently made a major overhaul on our clipboard). Included in the message is this script , which is a working example of copying and pasting through Javascript.

The good news is that this example gives you working code to configure / retrieve any supported clipboard data types whenever the user uses the clipboard hotkey.

The bad news is that using your own context menu to copy and paste is problematic. Even Google cannot get around this (try using the context menu to copy or paste into Google Docs in Firefox). You can get it working without any problems in IE. This is because you can access the clipboardData object at any time from Javascript with:

 window.clipboardData 

(If you try to do this outside of the case of cutting, copying, or pasting the system, IE will prompt the user to grant permission for the web application for the clipboard.)

In Chrome, you can create a chrome extension that will give you clipboard permissions (this is what we do for Lucidchart). Then for users with the extension installed, you just need to fire the system event yourself when they click on the menu item:

 document.execCommand('copy'); 

It seems that Firefox has several options that allow users to grant permissions to certain sites to access the buffer, but I have not tried any of them personally.