Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Copy to clipboard without Flash

I found many solutions for copying to the clipboard, but they all either with flash, or for websites side. I'm looking for method copy to clipboard automatically, without flash and for user side, it's for userscripts and of course cross-browser.

like image 706
Black_Sun Avatar asked Jun 15 '11 08:06

Black_Sun


People also ask

How do I copy text to clipboard?

Select the first item that you want to copy, and press CTRL+C. Continue copying items from the same or other files until you have collected all of the items that you want. The Office Clipboard can hold up to 24 items.

How do I add copy to clipboard button on page?

First, we select the text to copy to the clipboard whether it is from a div or from an input box using document. getElementById() or any other suitable function. Then we store the value of that text in a variable and pass that variable as an argument to navigator. clipboard.

Can Javascript copy to clipboard?

select() to select the contents of the <textarea> element. Use Document. execCommand('copy') to copy the contents of the <textarea> to the clipboard.

What is clipboard in Javascript?

Clipboard is based on the EventTarget interface, and includes its methods. read() Requests arbitrary data (such as images) from the clipboard, returning a Promise that resolves with an array of ClipboardItem objects containing the clipboard's contents. readText()

Is there a way to copy text to clipboard without flash?

clipboard.js — Copy to clipboard without Flash Copy text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.

Why does clipboard JS exist?

That's why clipboard.js exists. clipboard.js A modern approach to copy text to clipboard No Flash. No frameworks. Just 3kb gzipped Why Copying text to the clipboard shouldn't be hard.

What is copy to clipboard?

A browser extension that adds a "copy to clipboard" button to every code block on GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Medium. Install for Chromeand Firefox. Made with ♥by Zeno Rochaunder MIT license

How do I install clipboard JS?

It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework. That's why clipboard.js exists. Install You can get it on npm. npm install clipboard --save Or if you're not into package management, just download a ZIPfile. Setup


2 Answers

Without flash, it's simply not possible in most browsers. The user's clipboard is a security-relevant resource since it could contain things like passwords or credit card numbers. Thus, browsers rightly don't allow Javascript access to it (some allow it with a warning shown that the user has confirm, or with signed Javascript code, but none of that is cross-browser).

like image 59
Michael Borgwardt Avatar answered Sep 19 '22 14:09

Michael Borgwardt


I had tryed the flash solution and I don't liked too. Too complex and too slow. What I did was to create a textarea, put the data into that and use the browser "CTRL + C" behavior.

The jQuery javascript part:

// catch the "ctrl" combination keydown $.ctrl = function(key, callback, args) {     $(document).keydown(function(e) {         if(!args) args=[]; // IE barks when args is null         if(e.keyCode == key && e.ctrlKey) {             callback.apply(this, args);             return false;         }     }); };  // put your data on the textarea and select all var performCopy = function() {     var textArea = $("#textArea1");     textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');     textArea[0].focus();     textArea[0].select(); };  // bind CTRL + C $.ctrl('C'.charCodeAt(0), performCopy); 

The HTML part:
<textarea id="textArea1"></textarea>

Now, put what do you want to copy in 'PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.' area. Works fine for me me. You just have to make one CTRL+C combination. The only drawback is that you are going to have an ugly textarea displayed in you site. If you use the style="display:none" the copy solution will not work.

like image 43
Julio Saito Avatar answered Sep 22 '22 14:09

Julio Saito