Click button copy to clipboard using jQuery
|
4:54 AM |
No comments |
Click button copy to clipboard using jQuery
How do I copy the text inside a div to the clipboard? I have a div and need to add a link which will add the text to the clipboard. Is there a solution for this?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
copy Text After I click copy text, then I press Ctrl + V, it must be pasted.
Answer by jfriend00 for Click button copy to clipboard using jQuery
Directly copying to the clipboard via JavaScript is not permitted by any modern browser for security reasons. The most common workaround is to use a Flash capability for copying to the clipboard that can only be triggered by a direct user click.
As mentioned already, ZeroClipboard is a popular set of code for managing the Flash object to do the copy. I've used it. If Flash is installed on the browsing device (which rules out mobile or tablet), it works.
The next most common work-around is to just place the clipboard-bound text into an input field, move the focus to that field and advise the user to press Ctrl + C to copy the text.
Other discussions of the issue and possible work-arounds can be found in these prior Stack Overflow posts:
These questions asking for a modern alternative to using Flash have received lots of question upvotes and no answers with a solution (probably because none exist):
InternetExplorer and Firefox used to have non-standard APIs for accessing the clipboard, but their more modern versions have deprecated those methods (probably for security reasons).
There is a nascent standards effort to try to come up with a "safe" way to solve the most common clipboard problems (probably requiring a specific user action like the Flash solution requires), and it looks like it may be partially implemented in the latest versions of Firefox and Chrome, but I haven't confirmed that yet.
Answer by Sydney Buildings for Click button copy to clipboard using jQuery
The text to copy is in text input,like: and, on button click above text should get copied to clipboard,so button is like: Your script should be like:
For CDN files
note: ZeroClipboard.swf and ZeroClipboard.js" file should be in the same folder as your file using this functionality is, OR you have to include like we include on our pages.
Answer by Alvaro Montoro for Click button copy to clipboard using jQuery
There is another non-Flash way (apart from the Clipboard API mentioned in jfriend00's answer). You need to select the text and then execute the command copy to copy to the clipboard whatever text is currently selected on the page.
For example, this function will copy the content of the passed element into the clipboard (updated with suggestion in the comments from PointZeroTwo):
function copyToClipboard(element) { var $temp = $("") $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } This is how it works:
- Creates a temporary hidden text field.
- Copies the content of the element to that text field.
- Selects the content of the text field.
- Executes the command copy like:
document.execCommand("copy"). - Removes the temporary text field.
You can see a quick demo here:
function copyToClipboard(element) { var $temp = $(""); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } P1: I am paragraph 1
P2: I am a second paragraph
The main issue is that not all browsers support this feature at the moment, but you can use it on the main ones from:
- Chrome 43
- Internet Explorer 10
- Firefox 41
Update 1: This can be achieved also with a pure JavaScript solution (no jQuery):
function copyToClipboard(elementId) { // Create a "hidden" input var aux = document.createElement("input"); // Assign it the value of the specified element aux.setAttribute("value", document.getElementById(elementId).innerHTML); // Append it to the body document.body.appendChild(aux); // Highlight its content aux.select(); // Copy the highlighted text document.execCommand("copy"); // Remove it from the body document.body.removeChild(aux); }P1: I am paragraph 1
P2: I am a second paragraph
Notice that we pass the id without the # now.
As madzohan reported in the comments below, there is some strange issue with the 64-bit version of Google Chrome in some cases (running the file locally). This issue seems to be fixed with the non-jQuery solution above.
Madzohan tried in Safari and the solution worked but using document.execCommand('SelectAll') instead of using .select() (as specified in the chat and in the comments below).
As PointZeroTwo points out in the comments, the code could be improved so it would return a success/failure result. You can see a demo on this jsFiddle.
Answer by a coder for Click button copy to clipboard using jQuery
clipboard.js is a nice utility that allows copying of text or HTML data to the clipboard without use of Flash. It's very easy to use; just include the .js and use something like this:
clipboard.js is also on GitHub.
Answer by Umer Farook for Click button copy to clipboard using jQuery
It is a simplest method to copy the content
Lorepm ispum function SelectContent(element) { var doc = document , text = doc.getElementById(element) , range, selection ; if (doc.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); } document.execCommand('Copy'); } $(".copy").click(function(){ SelectContent( $(this).attr('title')); }); Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
0 comments:
Post a Comment