javascript tutorial - [Solved-5 Solutions] Copy to the clipboard in javascript - javascript - java script - javascript array
Problem:
What is the best way to copy text to the clipboard?
Solution 1:
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
click below button to copy the code. By JavaScript tutorial team
- The user is presented with the prompt box, where the text to be copied is already selected. Now it's enough to press
Ctrl+CandEnter(to close the box) -- and voila! - Now the clipboard copy operation is SAFE, because the user does it manually (but in a pretty straightforward way). Of course, works in all browsers.
<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what WE want to copy</button>
<script>
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
</script>
click below button to copy the code. By JavaScript tutorial team
Solution 2:
If we want a really simple solution (takes less than 5 minutes to integrate) and looks good right out of the box, then Clippy is a nice alternative to some of the more complex solutions.
Clippy
It was written by a co-founder of Github. Example Flash embed code below:
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="110"
height="14"
id="clippy">
<param name="movie" value="/flash/clippy.swf"/>
<param name="allowScriptAccess" value="always"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param NAME="FlashVars" value="text=#{text}"/>
<param name="bgcolor" value="#{bgcolor}"/>
<embed
src="/flash/clippy.swf"
width="110"
height="14"
name="clippy"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
FlashVars="text=#{text}"
bgcolor="#{bgcolor}"/>
</object>
click below button to copy the code. By JavaScript tutorial team
Solution 3:
Reading and modifying the clipboard from a webpage raises security and privacy concerns. However, in Internet Explorer, it is possible to do it. We found this example snippet:
<script type="text/javascript">
function select_all(obj) {
var text_val=eval(obj);
text_val.focus();
text_val.select();
if (!r.execCommand) return; // feature detection
r = text_val.createTextRange();
r.execCommand('copy');
}
</script>
<input value="http://www.wikitechy.com"
onclick="select_all(this)" name="url" type="text" />
click below button to copy the code. By JavaScript tutorial team
Solution 4:
clipboard.js is a small, non-flash, 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>
click below button to copy the code. By JavaScript tutorial team
Solution 5:
ZeroClipboard is the best cross-browser solution I've found:
<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>
<script src="ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard( document.getElementById('copy') );
</script>
If we need non-flash support for iOS we just add a fall-back:
clip.on( 'noflash', function ( client, args ) {
$("#copy").click(function(){
var txt = $(this).attr('data-clipboard-text');
prompt ("Copy link, then click OK.", txt);
});
});