In Internet Explorer I can use the clipboardData object to access the clipboard. How can I do that in FireFox, Safari and/or Chrome?
For security reasons, Firefox doesn't allow you to place text on the clipboard. However, there is a workaround available using Flash.
function copyIntoClipboard(text) {
var flashId = 'flashId-HKxmj5';
/* Replace this with your clipboard.swf location */
var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';
if(!document.getElementById(flashId)) {
var div = document.createElement('div');
div.id = flashId;
document.body.appendChild(div);
}
document.getElementById(flashId).innerHTML = '';
var content = '<embed src="' +
clipboardSWF +
'" FlashVars="clipboard=' + encodeURIComponent(text) +
'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashId).innerHTML = content;
}
The only disadvantage is that this requires Flash to be enabled.
The source is currently dead: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (and so is its Google cache)
There is now a way to easily do this in most modern browsers using
document.execCommand('copy');
This will copy currently selected text. You can select a textArea or input field using
document.getElementById('myText').select();
To invisibly copy text you can quickly generate a textArea, modify the text in the box, select it, copy it, and then delete the textArea. In most cases this textArea wont even flash onto the screen.
For security reasons, browsers will only allow you copy if a user takes some kind of action (ie. clicking a button). One way to do this would be to add an onClick event to a html button that calls a method which copies the text.
A full example:
function copier(){
document.getElementById('myText').select();
document.execCommand('copy');
}
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>
Online spreadsheet applications hook Ctrl + C and Ctrl + V events and transfer focus to a hidden TextArea control and either set its contents to desired new clipboard contents for copy or read its contents after the event had finished for paste.
See also Is it possible to read the clipboard in Firefox, Safari and Chrome using JavaScript?.
It is summer 2015, and with so much turmoil surrounding Flash, here is how to avoid its use altogether.
clipboard.js is a nice utility that allows copying of text or html data to the clipboard. It's very easy to use, just include the .js and use something like this:
<button id='markup-copy'>Copy Button</button>
<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});
});
</script>
clipboard.js is also on GitHub.
As of 2017, you can do this:
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
And now to copy copyStringToClipboard('Hello, World!')
If you noticed the setData line, and wondered if you can set different data types, the answer is yes.
Firefox does allow you to store data in the clipboard, but due to security implications it is disabled by default. See how to enable it in "Granting JavaScript access to the clipboard" in the Mozilla Firefox knowledge base.
The solution offered by amdfan is the best if you are having a lot of users and configuring their browser isn't an option. Though you could test if the clipboard is available and provide a link for changing the settings, if the users are tech savvy. The JavaScript editor TinyMCE follows this approach.
The copyIntoClipboard() function works for Flash 9, but it appears to be broken by the release of Flash player 10. Here's a solution that does work with the new flash player:
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
It's a complex solution, but it does work.
I have to say that none of these solutions really work. I have tried the clipboard solution from the accepted answer, and it does not work with Flash Player 10. I have also tried ZeroClipboard, and I was very happy with it for awhile.
I'm currently using it on my own site (http://www.blogtrog.com), but I've been noticing weird bugs with it. The way ZeroClipboard works is that it puts an invisible flash object over the top of an element on your page. I've found that if my element moves (like when the user resizes the window and i have things right aligned), the ZeroClipboard flash object gets out of whack and is no longer covering the object. I suspect it's probably still sitting where it was originally. They have code that's supposed to stop that, or restick it to the element, but it doesn't seem to work well.
So... in the next version of BlogTrog, I guess I'll follow suit with all the other code highlighters I've seen out in the wild and remove my Copy to Clipboard button. :-(
(I noticed that dp.syntaxhiglighter's Copy to Clipboard is broken now also.)
Check this link:
Granting JavaScript access to the clipboard
Like everybody said, for security reasons, it is by default disabled. The page above shows the instructions of how to enable it (by editing about:config in Firefox or the user.js file).
Fortunately, there is a plugin called "AllowClipboardHelper" which makes things easier with only a few clicks. however you still need to instruct your website's visitors on how to enable the access in Firefox.
Use the modern document.execCommand("copy") and jQuery. See this Stack Overflow answer.
var ClipboardHelper = { // As Object
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
How to call it:
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
// jQuery document
;(function ( $, window, document, undefined ) {
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
//todo prepare Text: remove double whitespaces, trim
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
$(document).ready(function()
{
var $body = $('body');
$body.on('click', '*[data-copy-text-to-clipboard]', function(event)
{
var $btn = $(this);
var text = $btn.attr('data-copy-text-to-clipboard');
ClipboardHelper.copyText(text);
});
$body.on('click', '.js-copy-element-to-clipboard', function(event)
{
ClipboardHelper.copyElement($(this));
});
});
})( jQuery, window, document );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span data-copy-text-to-clipboard=
"Hello
World">
Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World
Element
</span>
I've used GitHub's Clippy for my needs and is a simple Flash-based button. It works just fine if one doesn't need styling and is pleased with inserting what to paste on the server-side beforehand.
http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp works with Flash 10 and all Flash enabled browsers.
Also ZeroClipboard has been updated to avoid the bug mentioned about page scrolling causing the Flash movie to no longer be in the correct place.
Since that method "Requires" the user to click a button to copy this is a convenience to the user and nothing nefarious is occurring.
A slight improvement on the Flash solution is to detect for Flash 10 using swfobject:
http://code.google.com/p/swfobject/
And then if it shows as Flash 10, try loading a Shockwave object using JavaScript. Shockwave can read/write to the clipboard (in all versions) as well using the copyToClipboard() command in Lingo.
Try creating a memory global variable storing the selection. Then the other function can access the variable and do a paste. For example,
var memory = ''; // Outside the functions but within the script tag.
function moz_stringCopy(DOMEle, firstPos, secondPos) {
var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;
}
function moz_stringPaste(DOMEle, newpos) {
DOMEle.value = DOMEle.value.slice(0, newpos) + memory + DOMEle.value.slice(newpos);
}
If you support Flash, you can use https://everyplay.com/assets/clipboard.swf and use the flashvars text to set the text.
https://everyplay.com/assets/clipboard.swf?text=It%20Works
That’s the one I use to copy and you can set as extra if it doesn't support these options. You can use:
For Internet Explorer:
window.clipboardData.setData(DataFormat, Text) and window.clipboardData.getData(DataFormat)
You can use the DataFormat's Text and URL to getData and setData.
And to delete data:
You can use the DataFormat's File, HTML, Image, Text and URL. PS: You need to use window.clipboardData.clearData(DataFormat);.
And for other that’s not support window.clipboardData and swf Flash files you can also use Control + C button on your keyboard for Windows and for Mac its Command + C.
From addon code:
For how to do it from Chrome code, you can use the nsIClipboardHelper interface as described here: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard
Use document.execCommand('copy'). It is supported in the latest versions of Chrome, Firefox, Edge, and Safari.
function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement('DIV');
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand('copy');
element.remove();
}
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
copyText(txt.value);
})
<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>
Clipboard API is designed to supersede document.execCommand. Safari is still working on support, so you should provide a fallback until the specification settles and Safari finishes implementation.
const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
evt.preventDefault();
window.navigator.clipboard.writeText(
permalink.href
).then(() => {
output.textContent = 'Copied';
}, () => {
output.textContent = 'Not copied';
});
};
Permalink
<output></output>
For security reasons clipboard Permissions may be necessary to read and write from the clipboard. If the snippet doesn't work on Stack Overflow give it a shot on localhost or an otherwise trusted domain.
Building off the excellent answer from David from Studio.201, this works in Safari, Firefox, and Chrome. It also ensures no flashing could occur from the textarea by placing it off-screen.
// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {
function copyText(text) {
// Create temp element off-screen to hold text.
var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
$("body").append(tempElem);
tempElem.val(text).select();
document.execCommand("copy");
tempElem.remove();
}
// ============================================================================
// Class API
// ============================================================================
return {
copyText: copyText
};
})();
Related
I know this kind of question has been asked here for many times, including: How do I copy to the clipboard in JavaScript? or How to copy text to the client's clipboard using jQuery?, I'm narrowing the scope:
Condition:
works fine in Google Chrome (would be nice if cross-browser, but not necessary)
with no flash
Is there such a solution or workaround?
You can use either document.execCommand('copy') or addEventListener('copy'), or a combination of both.
1. copy selection on custom event
If you want to trigger a copy on some other event than ctrl-c or right click copy, you use document.execCommand('copy'). It'll copy what's currently selected. Like this, on mouseup for example:
elem.onmouseup = function(){
document.execCommand('copy');
}
EDIT:
document.execCommand('copy') is supported only by Chrome 42, IE9 and Opera 29, but will be supported by firefox 41 (scheduled for september 2015). Note that IE will normally asks for permission to access the clipboard.
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
2. copy custom content on copy triggered by user
Or, you can use addEventListener('copy'), this will interfere with copy event and you can put the content you want there. This suppose user triggers copy.
EDIT:
On Chrome, Firefox and Safari the event has the clipboardData object with setData method. On IE, the clipboardData object is a window property. So this can work on all major browsers provided you validate where is clipboardData.
elem2.addEventListener('copy', function (e) {
e.preventDefault();
if (e.clipboardData) {
e.clipboardData.setData('text/plain', 'custom content');
} else if (window.clipboardData) {
window.clipboardData.setData('Text', 'custom content');
}
});
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData
https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
3. a bit of both
Using a combination, you can copy custom content on wanted events. So the first event triggers execCommand, then the listener interferes. For example, put custom content on click on a div.
elem3.onclick = function () {
document.execCommand('copy');
}
elem3.addEventListener('copy', function (e) {
e.preventDefault();
if (e.clipboardData) {
e.clipboardData.setData('text/plain', 'custom content from click');
} else if (window.clipboardData) {
window.clipboardData.setData('Text', 'custom content from click');
}
});
Using this last one supposes that both approach are supported, as of July 2015, it works only on Chrome 43 (maybe 42 I couldn't test) and IE at least 9 and 10. With Firefox 41 supporting execcommand('copy'), it should work as well.
Note that for most of these methods and properties are declared as either experimental (or even deprecated for IE), so it's to be used carefully, but it looks like it's more and more supported.
Fiddle with all examples: https://jsfiddle.net/jsLfnnvy/12/
I just find another amazing repo on Github.
Modern copy to clipboard. No Flash. Just 3kb gzipped
https://github.com/zenorocha/clipboard.js
Browser Support:
If you don't mind IE/Safari, you can use following (new) API:
var promise = navigator.clipboard.writeText(newClipText)
Read the docs here
Variable string can copy to clipboard using below js code.
var text = 'text to copy';
var copyFrom = $('<textarea/>');
copyFrom.css({
position: "absolute",
left: "-1000px",
top: "-1000px",
});
copyFrom.text(text);
$('body').append(copyFrom);
copyFrom.select();
document.execCommand('copy');
Actually for those figuring this out i got it to work in chrome based on #JulianGregoire s answer.
I rewrote the code to make it a bit better in my opinion:
el.onclick = function () {
var copy = function (e) {
e.preventDefault();
console.log('copy');
var text = "blabla"
if (e.clipboardData) {
e.clipboardData.setData('text/plain', text);
} else if (window.clipboardData) {
window.clipboardData.setData('Text', text);
}
}
window.addEventListener('copy', copy);
document.execCommand('copy');
window.removeEventListener('copy', copy);
}
Beware: I tried the exact same script of Julien Grégoire, however it wasn't triggering the oncopy event listener. The reason, I had user-select CSS for the body-tag.
So make sure you remove it, or set it to initial on the element the event listener is attached to.
Example: https://jsfiddle.net/faimmedia/jsLfnnvy/80/
If you're using knockout, like me (for some reason I still am), you'll want to take a look at this question/answer:
How to make KnokoutJS and ClipboardJS work together?
function copyToClipboard(s) {
if (window.clipboardData && clipboardData.setData) {
clipboardData.setData('text', s);
}
}
Then call the function with the text and that should work.
So I was browsing the internet one day, and copied a chunk of text "my cool text" and pasted it to facebook, only to see that it changed it to "my cool text - Read More at URL", I was in awe! That's awesome!
So I dove in a little and found some tutorials and such. I took to my own to convert it to a customizable plugin with dozens of options, and it outputs this (or similar based on options):
function copyCopyright() {
var theBody = document.getElementsByTagName("body")[0];
var selection;
selection = window.getSelection();
var copyrightLink = '<br /><br />Read more at: '+document.location.href+'<br /> ©2012 ';
var copytext = selection + copyrightLink;
var extraDiv = document.createElement("div");
extraDiv.style.position="absolute";
extraDiv.style.left="-99999px";
theBody.appendChild(extraDiv);
extraDiv.innerHTML = copytext;
selection.selectAllChildren(extraDiv);
window.setTimeout(function() {
theBody.removeChild(extraDiv);
},0);
}
document.oncopy = copyCopyright;
works GREAT in Chrome and Firefox, etc. But of COURSE it doesn't work in IE (even IE9!). I'm fairly new to Javascript, especially hunting down IE problems with it.
Is there a function or method or something above that IE just won't recognize that I'll have to find an alternate way around?
IE needs
document.body.oncopy=copyCopyright
added to your onload event. (body doesn’t exist until loaded)
How to add Copy to clipboard functionality in ExtJs?
It's working fine with IE browser but not Firefox, What else has to be altered to make it work in FF browser.
Code:
function selectCopy(txt,txtId)
{
Ext.getCmp(txtId).focus();
Ext.getCmp(txtId).selectText();
var s = document.getElementById(txtId).value;
var div = document.createElement('div');
div.innerText = '"' + s + '"';
document.body.appendChild(div);
if (window.clipboardData && clipboardData.setData){
window.clipboardData.setData('text', s);}
else
return (s);
}
Answer: Firefox has to be altered. It cannot be done with JavaScript alone.
Clipboard access in the browser is considered a security risk. See this page for an explanation.
That said, you can achieve this with a combination of Flash and JavaScript. Zero Clipboard is one way.
hey, i know there's lots of tutorials out there but none seem to be working for me.
I have this :
<textarea name="forum_link" type="text" style="width:630px; height:90px;">
[URL=http://www.site.net/video/<?=$_GET['id']?>/<?=$_GET['tag']?>]<?=$video->title?>[/URL]
[URL=http://www.site.net/video/<?=$_GET['id']?>/<?=$_GET['tag']?>][IMG]<?=$video->thumbnailURL?>[/IMG][/URL]
</textarea>
Now all i want is a simple button, that when clicked copies the text in the textarea to the users clipboard.
Any help would be great :)
Thanks
<textarea id="html" name="html">Some text</textarea>
<input type="button" value="Refresh" onclick="copy_to_clipboard('html');">
<script>
function copy_to_clipboard(id)
{
document.getElementById(id).select();
document.execCommand('copy');
}
</script>
Sadly there's no all in one solution for this. Browsers other than IE doesnt allow copying to clipboard. I found I nice solution recently which uses Flash (for all browsers but IE) and JavaScript for IE to copy text to the clipboard. See zeroclipboard for details.
Check out this page. It doesn't say anything about browser compatibility, but could be worth checking out! It gives a javascript copy to clipboard example, and the HTML associated with it.
http://www.geekpedia.com/tutorial126_Clipboard-cut-copy-and-paste-with-JavaScript.html
The solution is purely on Javascript. i don't know about its compatibility with other browsers. For chrome its working, I am adding the code snippet.
//all text written(inside text area), is copied and shown inside the div with class "mas"
//you can't see it, as it is hidden(opacity is 0)
$('#content:not(.focus)').keyup(function(){
var value = $(this).val();
var contentAttr = $(this).attr('name');
$('.'+contentAttr+'').html(value.replace(/\r?\n/g,'<br/>'));
})
//below code can copy text inside a div. div id should be identical with button oclick id
copyToClipboard = function (element) {
var $temp = $("<input />");
$("body").append($temp);
$temp.val($(element).text()).select();
var result = false;
try {
result = document.execCommand("copy");
} catch (err) {
console.log("Copy error: " + err);
}
$temp.remove();
return result;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<textarea name="mas" rows="6" id="content"></textarea>
<p> </p>
<div id="p1" class="mas" style="top:0px;position:absolute;opacity:0;" ></div>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
Please see this Jsfiddle for more detail.
Browser compatibility using any script is shoddy at best. JavaScript intentionally doesn't natively allow this level of functionality with the operating system. It is possible to create a signed script that you'll have better luck with, but... that's a lot more work and hardly worth it. Most people know how to copy and paste...
Unfortunately javascript does not have a universal way. Currently, the use of flash & javascript most universal way.
Look on a LMCButton - a small animated flash button (4 kb) for "Copy to clipboard".
Example of using javascript:
Get html code of the button: function lmc_get_button(cliptext, idLMC)
Update text in the button: function lmc_set_text(idLMC, text)
Modern Solution
document.execCommand('copy') is now deprecated
Instead, we now have the Clipboard API
You can use the writeText() property to accomplish this:
$('button').on('click', () => {
navigator.clipboard.writeText($('textarea').val()).then(
() => {
console.log('clipboard successfully set');
},
() => {
console.error('clipboard write failed');
}
);
});
or just simply:
$('button').on('click', () => {
navigator.clipboard.writeText($('textarea').val());
});
Bonus: This works with disabled textareas and is cross-browser compatible
I'm trying to read the contents of the clipboard using JavaScript. With Internet Explorer it's possible using the function
window.clipboardData.getData("Text")
Is there a similar way of reading the clipboard in Firefox, Safari and Chrome?
Safari supports reading the clipboard during onpaste events:
Information
You want to do something like:
someDomNode.onpaste = function(e) {
var paste = e.clipboardData && e.clipboardData.getData ?
e.clipboardData.getData('text/plain') : // Standard
window.clipboardData && window.clipboardData.getData ?
window.clipboardData.getData('Text') : // MS
false;
if(paste) {
// ...
}
};
Online Spreadsheets hook Ctrl+C, Ctrl+V events and transfer focus to a hidden TextArea control and either set it contents to desired new clipboard contents for copy or read its contents after the event had finished for paste.
NO. And if you do find a hack (e.g. old version of flash) do not depend on it.
Can I ask why you want to read from the clipboard? If the user wants to pass along the clipboard contents, all they need to do is paste.
I believe people use a hidden Flash element to read the clipboard data from the browsers you mentioned.
Using #agsamek suggestion I created a little test snipped and got it to work. In my case I need to wait after a fresh pageload for pasted input, so I focus on an out-of-view textarea and read the text from there.
You could extend this to listen to specific keys (paste combination) and then focus on the hidden field. There would definitely more work to be done as I think you need to re-focus then on the last focused element and paste content there.
For my use-case though this was enough to make it work in latest Chrome and Firefox. Suggestions welcome.
https://jsfiddle.net/wuestkamp/91dxjv7s/11/
$(function () {
$('body').prepend('<input type="text" id="hidden_textbox" style="position: absolute; width:0px; height: 0px; top: -100px; left: -100px">');
var $hiddenTextbox = $('#hidden_textbox');
$hiddenTextbox.focus();
$(document).on('paste', function () {
setTimeout(function () {
var val = $hiddenTextbox.val();
console.log('pasted: ' + val);
}, 50);
});
});