Jump to content
xisto Community
BuffaloHelp

One Click Copy And Paste To Clipboard in simple Javascript

Recommended Posts

I've been search the web for few weeks to see if Java can do one click copy and paste function to the clipboard and then I can just Ctrl-V the copied "texts." I initially got this idea when I began to approve hosting application. Instead of writing the same message over and over again, I decided to make me a page where I can simply copy the code to appropriate answers. And seems like my laziness is the mother of inventions :( Instead of doing Ctrl-A, Ctrl-C then Ctrl-V to the post board I started to dream about a button that will select my pre-written message and copy at the stroke of one single click.

 

I have search the web but they were either not working properly or it was way too long for me to understand and work it in with my own webpage. But accidentally I found this script that is short and does the job like no other I have ever seen. So I'd like to share it with you.

 

<html>
<head>
<title>Javascript for one-click highlight and copy to clipboard</title>
</head>
<script language='Javascript'>
function doact(d)
{
	var doc = eval("document.readme."+d);
	cp = doc.createTextRange();
	doc.focus();
	doc.select();
	cp.execCommand("Copy");
}
</script>
<form name="readme">
<body>
<center>
<TEXTAREA name="text1" cols="30" rows="5">
Your basic HTML codes can be entered here. 
Do not worry about HTML codes interfering with your regualr web page since the <TEXTAREA> cannot excute any codes at all.
</TEXTAREA><BR>
<input onclick="doact('text1')" type="button" value="Copy Code">

<BR><BR>

<TEXTAREA name="text2" cols="30" rows="20">
This TEXTAREA is to demonstrate the inclusion of the second parameter.

You can even skip lines or create list

1
2
3
4
5
</TEXTAREA><BR>
<input onclick="doact('text2')" type="button" value="Copy Code">
</center>
</body>

</html>

Couple of key elements you should be aware

This code is currently 100% compatible with IE. I'm still working on FireFox but I was told that I need to edit pref.js in "about" page. If you read this article Security Issues with Ctrl-C and Clipboard by cse-icons and made the change to your browser you need to undo or reverse the effect when executing this script. I uploaded to my personal webspace and made only the TRUSTED site to execute this script. You can see this script in action by visiting this page.

 

Few things I had issues when making this script working

1. Make sure that your <FORM name="*****"> is equal to var doc = eval("document.*****."+d);

 

2. <TEXTAREA name="text1"> is the same name in each input botton, i.e.

<input onclick="doact('text1')" type="button" value="Copy Code">

3. However it is written in the TEXTAREA is how it will appear when you Ctrl-V or paste to your page/notepad. So it will obey every format you include such as every space line, indents, tabs and even break of sentence or code.

 

4. I have included the secondary TEXTAREA to demonstrate the ability to add additional code copy.

 

Since I found this code on the web I cannot take the credit for it. I merely took it apart and made it to work with what I intended. I couldn't find the author to this very short yet effective code. Perhaps one of you may know. This simple javascript was the shortest and most intuitive that I have seen so far. As soon as I get it working with FireFox I'll let you all know.

Share this post


Link to post
Share on other sites

Like Richard Said. I have seen little versions of this but this is way bigger than I've ever seen. I'm glad you found something to help you out on this site. I can't wait to get my webpage active too!

Share this post


Link to post
Share on other sites

I have seen that but never really figured out how to do it. Thanks for sharing the code Buffalo. That'll be helpful on my site when I have to do stuff like that. I almost was gonna tell you that it doesn't work. I didn't realize that I was using firefox I thought I was using Internet Explorer but then I noticed and it works fine. Very nice.

Share this post


Link to post
Share on other sites

About this javascipt

One Click Copy And Paste To Clipboard

 

I need something to copy a table into an outlook new message window...

This js copies the html code and I was wondering if someone could help me with this. So I need an ideea to make a js that copies the table as table not as html code.

10x,

Kat

Share this post


Link to post
Share on other sites

Thank you a million!This little piece of code saved me $35 that I had to pay otherwise to a piece of software that does exactly this job and nothing more. and as this is html / javascript code, I could easily edit it and make it show exactly and only what I need, where I need it and how I need it

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.