Copy and paste the selected text to the clipboard using JavaScript - javascript

I'm building a custom right-click menu for my system and I need to know how can I make a JavaScript function to copy the selected text, basically 100% like the original right-click menu does.
I'm aware of the Flash work-arounds. I want to do this in JavaScript.
Every answer I've seen so far is only a half-answer because none of them explains how to make a copy button for the selected text - all what they do is copy a pre-defined text or a text from a textbox.

Modern Day Browsers block access to the clipboard. The user has to have the security setting correct.
There are flash work-arounds, but they are not the best.

For non-IE browsers you will most likely have to use a flash solution. For IE, however, this method works perfectly:
function copyToClipboard(s) { //only works in IE :(
if (window.clipboardData && clipboardData.setData) {
clipboardData.setData('text', s);
}
}

no idea if this will work, but a google search yielded:
function getSel(){
var w=window,d=document,gS='getSelection';
return (''+(w[gS]?w[gS]():d[gS]?d[gS]):d.selection.createRange().text)).replace(/(^\s+|\s+$)/g,'');
}
http://snippets.dzone.com/posts/show/2914

A workable cross-browser approach (minus iOS) would be to use ExternalInterface and setClipboard.
So you would have a swf, flash file, that only listens to a function you call from Javascript to set the clipBoard.

Related

dart function to copy text to clipboard with MIME type

I'm trying to copy text to the OS clipboard in my dart web app with the push of a button, and I'm not finding a clean way of doing so.
My current solution is to create a textArea element, add the text I'm intending to copy to the element, calling document.execCommand("copy") on said element, then deleting the textArea element. This works in the browsers I am intending to support; however, I also need to set the MIME type for this copied text, which does not appear to be possible with my current implementation.
So, my question for you all is: using my current solution, can I also set the MIME type for the text being copied? OR is there a better approach I could take using a different dart api?
Javascript (even dart converted to javascript) cannot get to the OS clipboard. Only Flash seems to have that ability.

Fire copy using javascript

I have a html input. Using javascript & jQuery I can select the value of input. Now I want to fire a ctrl+c to copy that value in clipboard. I can use some plugins like zClip/zeroClip but this plugins uses flash which is not supported in all browsers. Is there any other option to copy that value in clip board?
The code should run in chrome, chromium, ff, opera & ie 10.
<iframe src="https://cdn.rawgit.com/Triforcey/clip-j/38e8bf144e4633fffde57c675171b22211174e24/test.html" frameborder="0" width="100%" height="100%" style="margin: 0px;"></iframe>
This is possible, despite the many people who do not know about this solution. (It's very new.) I have created an extremely easy to use JavaScript library for this called clip-j. Here is the GitHub page. Basically how it works is it takes advantage of document.execCommand('copy'); with a few other lines of code to optimize it to get around the limitation that you need to be able to see the copied text. So this simple solution requires on no Flash, and is completely invisible! Here is the source code:
function clip(text) {
var copyElement = document.createElement('input');
copyElement.setAttribute('type', 'text');
copyElement.setAttribute('value', text);
copyElement = document.body.appendChild(copyElement);
copyElement.select();
document.execCommand('copy');
copyElement.remove();
}
It's not possible to achieve this using JavaScript (or based frameworks) due to security reasons. It can only be done using flash (for which you can use zeroclip etc.).
Also see:
HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?
Copy to clipboard without Flash

Implement ctrl+x's behaviour same as ctrl+c without use of Flash

In my web application, I need a shortcut ctrl+x to hate the same behavior as ctrl+c when some text in paragraph is selected (selection is not in textarea or text input). I need solution without use of Flash.
First of all you have to prevent the default action on the cut-event. You can do this the following code:
$(document).ready(function(){
$('#input').live("cut",function(e) {
e.preventDefault();
});
});
Most browsers prevent control of the clipboard. Although I know the following jQuery-plugin exists that gives you a bit of control of it: zeroclipboard
Note: You must use the Flash add-in you do not want to use to automatically copy text to the client's clipboard. A website automatically modifying the client's clipboard without the aid of active-x components is a security concern.

can't select text in textarea in IE

I've got a couple of cases where I use a textarea to display some source code for database queries. The idea is to allow the user to select all the text in the textarea so they can copy that code and paste it some where else. All is good and well except in IE-{8,9} which are the only two IE browsers I care about.
The selection works fine for one textarea and not for the other. I've racked my brain over this for hours with no luck. I've tried to reproduce this in a tiny code snippet to illustrate the problem but that hasn't worked either.
So to go at it another direction is there a way to disable selecting text from a textarea that is IE specific and doesn't require specific javascript code? I'm not writing any specific code to disable the selection of text in a textarea.
for example if I have this textarea
<textarea>Some Text</textarea>
How might that text be unselectable in IE only? I've also tried selecting the text programatically using jquery, javascript, and DOM api. Which works in all browsers except IE-{8,9}.
Just for example.
$('textarea').select();
I've pondered the idea that some event listeners are not present, but since the IE developer tools sooo amazing I haven't had any luck tracking those down comparing what's listed in Chrome.
I've also reset IE and ensured copy 'drag and drop or copy and paste' is enabled.
I would chalk it up as a browser bug and write my own but since it work in one case and not the other it seems like something happening in the background I'm not seeing.
Yo can't refer to the textarea like this. You must use an id.
<textarea id="foo">Some Text</textarea>
<script type="text/javascript">
$('#foo').select();
</script>
​
Select by ID works perfectly fine for me:
jsfiddle link
Well as it turns out there was a mixin that was overriding the onselectstart method.
if (typeof self.node.onselectstart !== 'undefined') {
self.node.onselectstart = function() {
return false;
};
}

How do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken?

I am part of a team that works on a Java application that, among other things, helps people organize and annotate information from the web. We currently use a Firefox plug-in that attaches a container attribute that contains a document source, which allows dragged text to become cited automatically. This will not always result in getting the source document because only text is transferred when a selection does not cross html tags. e.g.
<p container="http://www.somesite.com/blah.html">this is text from a site</p><p container="http://www.somesite.com/blah.html">this is more text from a site</p>
So if only is text is selected, the html tags are never crossed and the browser thinks the surround tag information and its container attribute would be unwanted; so it ignores it.
So I decided to make a Chrome extension that would exploit some of the nifty features of HTML5 to make any drag from a browser page that is dropped into out Java application include the source document. FYI, Chrome extensions are Javascript based.
The correct for thing to do, it seems, is to register a dragstart event on the document that will allow me to access the content of the drag and also let me inject a meta tag that includes the source document location.
According to the current standard, http://dev.w3.org/html5/spec/Overview.html#the-datatransfer-interface , this should be possible by using the dataTransfer interface.
So, I register the dragstart event that should give me the dataTransfer event information. You can copy and paste this code into Chrome's Javascript console to see it for yourself:
window.addEventListener("dragstart", function(event) {
console.log(event.dataTransfer.types);
console.log(event.dataTransfer.getData("Text")); });
Then select something and drag it. In Chrome, the output is "null" then "undefined". If you paste the same code into Firebug's Javascript console then drag some text that you select, the out put is what you would expect:
DOMStringList { 0="text/_moz_htmlcontext", 1="text/_moz_htmlinfo", 2="text/html", more...}
whatever text was selected
Curiously, one can use setData on the event.dataTransfer to change what is dropped. That part seems to work as expected. Paste this instead into the Chrome Javascript console, then select something and drag it to a text editor or your search box:
window.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text","I made this here for you!");
});
It looks like it's broken. :( Does anyone have a workaround or some insight into this issue? I really want this to work in Chrome because I like its extension architecture.
Thanks!
WebKit, and hence Chrome, is quite restrictive on when you can call getData. You're not allowed to do it inside dragstart or dragover. I think this is the canonical bug.
Paste this line before the error line:
event.dataTransfer = event.originalEvent.dataTransfer;
This worked for me.

Categories