Fire copy using javascript - 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

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.

Copy to clipboard using jquery for all browsers [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to select all text in a textbox and copy it to clipboard using JavaScript/jQuery?
Copy text to the client’s clipboard using jQuery
I need a javascript, jquery function for copy to clipboard functionality. I know following code but it works in IE only:
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
I see some tutorials which are suggestion some swf files. I have used some of them like http://www.steamdev.com/zclip/ but it is not working.
Please suggest solution to it.
There isn't any cross-browser way to copy data to the clipboard via javascript (it's regarded as a security hole) - it can be done with the assistance of a small flash applet, but this of course isn't fully cross platform.
One of the cheats I've used before is to create a prompt with a default value in which makes it slightly easier for the user to copy-and-paste the information without having to highlight it in the page. But this doesn't really solve the problem. All you can do is make the copy-and-paste as little effort as possible.
The mainstream way of doing this is via a SWF object. ZeroClipboard is a neat project which deals with this.

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.

Copy and paste the selected text to the clipboard using 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.

How do some WYSIWYG editors keep formatting of pasted text?

How do some WYSIWYG editors keep formatting of pasted text? As an example, I copied italic red text from a text-editor into a WYSIWYG and it kept the text's color and style, how is this happening? For the longest I thought JavaScript had access the clipboards text only. Is this not the case? If so then, what is it?
There's a content type negotiation between the source and target during the copy/paste operation. It happens sort of like this:
You copy something into the copy and paste buffer. The copied data is tagged with, more or less, a MIME type and who put it there.
When you paste, the paste target tells the copy-and-paste system that it understands a specific list of MIME types.
The copy-and-paste system matches the available formats to the desired formats and finds text/html in both lists.
Someone (probably the original source of the data) then converts the paste buffer to text/html and drops it in the editor.
That's pretty much how things worked back when I was doing X11/Motif development (hey! get off my lawn you rotten kids!) so I'd guess that everyone does it pretty much the same way.
JavaScript has no direct access to the clipboard in general. However, all major browsers released over the past few years have a built-in WYSIWYG editing facility, via the contenteditable attribute/property of any element (which makes just that element editable) and the designMode property of document objects (which makes the whole document editable).
While the user edits content in the page, if they trigger a paste (via keyboard shortcuts such as Ctrl + V or Shift + Insert or via the Edit or context menus), the browser automatically handles the whole pasting process without any intervention from JavaScript. Part of this process includes preserving formatting wherever possible.
However, the HTML this produces can be gruesome and varies heavily between browsers. Many WYSIWYG editors such as TinyMCE and CKEditor employ tricks to intercept the pasted content and clean it before it reaches the editor's editable area.
What you're seeing is a rich text editor. There's some information in this Wikipedia article: http://en.wikipedia.org/wiki/Online_rich-text_editor
I think it copied the selected DOM instead

Categories