We help IT Professionals succeed at work.

Copy to clipboard javascript

garfield1979
garfield1979 asked
on
2,758 Views
Last Modified: 2012-06-21
Hi everyone,

i'm stuck on something that i've searched the web for, but the scripts out there either don't work or are not what i need..

I need to have an image (link) copy the contents of a hidden span or input field into the clipboard.

so in other words my page will have a hidden field containing some data, and the user clicks a little image to copy that data to their clipboard, nothing fancy, doesnt even have to work in all browsers, just IE.

Thanks in advance

Chris
Comment
Watch Question

Commented:
<html>
<head>
<script>
function doIt() {
     var x=document.getElementById('dajm');    
     document.form.copyArea.value=x.innerHTML;
     alert(document.form.copyArea.value);
     y = document.form.copyArea.createTextRange();
     y.select();
     y.execCommand("Copy");
}
</script>
</head>

<body onload="doIt()">

<p>Outside Div</p>
<div id="dajm">
  <table border="1" width="100%">
    <tr>
      <td width="50%">Inside Div</td>
      <td width="50%">&nbsp;</td>
    </tr>
    <tr>
      <td width="50%">&nbsp;</td>
      <td width="50%">&nbsp;</td>
    </tr>
  </table>
</div>
<form name="form">
  <input type="hidden" name="copyArea" value>
</form>
<p>Outside Div</p>
</body>
</html>

Commented:
Forget the above, try this instead...

===========

<html>

<head>
<script>
function doIt() {
     var x=document.getElementById('dajm');    
     document.form.copyArea.value=x.innerText;
     y = document.form.copyArea.createTextRange();
     y.select();
     y.execCommand("Copy");
}
</script>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>

<body>

<p>Outside Div</p>
<div id="dajm">
  Inside Div Content
</div>
<form name="form">
  <input type="hidden" name="copyArea" value><input type="button" value="Copy to Clipboard" onclick="doIt()">
</form>
<p>Outside Div</p>

</body>

</html>

Author

Commented:
i'm not quite sure i follow your javascript with all the tables and stuff ..? i'm sure there's an easier way ?

Commented:
I just want to show you it is only copying the text within the div, and not the whole page, which means you only need the doIt() script and the onclick="doIt()" to run
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
hey thanks Gwyn, that worked, for some reason if i separate the other scripts and put them in the head, then they dont work, i have a page full of ASP and i think something isnt' working from the head to where the button is placed...

It works with a button, now how can i make it work with an image, if you click the image it'll copy to the clipboard ?

Author

Commented:
Can anyone help me make Gwyns solution work in a different way ? again i need to put that code in an image instead of a button with the same effect.

Thanks in advance

Commented:
yes

<form>
<INPUT TYPE="image" src="myimage.gif" VALUE="copy" onClick="hid.value=document.getElementById('divName').innerHTML;hid.createTextRange().execCommand('Copy')">
<input type=hidden name=hid>
</form>

<div id='divName'>
hello world copy me!!
</div>
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.