Javascript - Control C textarea script

Forums: Javascript, Web Development, Textarea
Email this Topic • Print this Page

This script is used for the "Wilso feature" of this site. It enables a text area to be copied to the clipboard.

It degrades gracefully and in NS it will display a different button that does a different function (it selects all for NS but does not copy).

This should go in the page headers (or at least before the following form)

Code:

<SCRIPT language="JavaScript">

<!--

function highlightmetasearch() {

document.formname.text2copy.select(); document.formname.text2copy.focus();

}

function copymetasearch() {

highlightmetasearch();

textRange = document.formname.text2copy.createTextRange();

textRange.execCommand("RemoveFormat");

textRange.execCommand("Copy");

alert("This code has been copied to your clipboard.\nIf this post is lost you can repost it from your clipboard\nUse CTRL V to paste the text.");

	}

	// -->

	</SCRIPT>

Here is the form.

Code:

<FORM name="formname">

<TEXTAREA name="text2copy" cols="55" rows="10">testdsgfsrdgtest</TEXTAREA><br/><br/>

<script language="JavaScript" type="text/javascript">

<!--

if ((navigator.appName=="Microsoft Internet Explorer")&&(parseInt(navigator.appVersion)>=4)) {

document.write('<INPUT type="button" value="  COPY TO CLIPBOARD  " onClick="copymetasearch();">');

} else {

document.write('<INPUT type="button" value="  HIGHLIGHT TEXT  " onClick="highlightmetasearch();">');

}

// -->

</script>

</form>

formname and text2copy are variables that can be changed but if so must be changed in every appearance.

optional form tags:

Code:wrap="off" contenteditable="false"

I used this script to create the MOD that I published for this forum software.

The MOD is the featured hack at the number 1 MOD site for this forum software.

-----

Here is the lastest version of this MOD:

Code:

############################################################## 

## MOD Title: Copy Post to Clipboard (never let the site eat a post) 

## MOD Author: cdkrg  www.able2know.com 

## MOD Description: Ever have users complain that your forum "ate" their long post? 

## This MOD adds a button on the posting page that highlights all 

## the text of the post and copies it to the clipboard. If the browser is not compatible 

## it displays a different button that simply selects all the text allowing the user 

## to copy it more simply. You can see a working example of this at www.able2know.com/forums/ 

## on those forums there are two forums that allow you to post as a guest (since you are too lazy to register!) 

## those forums are the test forum and the forum help. Please don't post junk posts, you can 

## see this in action without submitting your post 

## 

## MOD Version: 1.0.0 

## 

## Installation Level: (easy) 

## Installation Time: 1 Minute 

## Files To Edit: posting_body.tpl 

## Included Files: n/a 

############################################################## 

## Author Notes: 

## This is a simple MOD that has a powerful feature. I don't expect there to be any 

## updates or newer versions as it runs perfectly in the first version with no bugs and certainly 

## no security holes. If you have installed other MODs like spellcheck you might not want to 

## add the extra row from this MOD and simply add the javascript to the row you have already 

## created. This is optional and a layout issue. If you like this MOD or have questions about 

## it please join my forum at www.able2know.com I can be contacted there. 

## You might want to edit the alert message. It contains the URL of the site that I made this for. 

## 

## 

############################################################## 

## Before Adding This MOD To Your Forum, You Should Back Up All Files Related To This MOD 

############################################################## 

## MOD GLOSSARY The following are definitions for actions 

## that might be included in this MOD, this MOD might not contain some of the terms defined below. 

## 

## COPY- Copy files to a location on the server 

## 

## OPEN - Open a specific file. 

## 

## FIND - Find a piece of code within the opened file 

## 

## REPLACE WITH - Replace a piece of code (whatever we "FIND") with this code 

## 

## OR - Replace With the above "REPLACE WITH"... OR... this code 

## 

## AFTER, ADD - After a piece of code, add this piece of code 

## 

## BEFORE, ADD - Before a piece of code, add this piece of code 

## 

## IN-LINE FIND - Find a piece of code within a code line 

## 

## IN-LINE AFTER, ADD - After a piece of code in a code line, add this piece of code 

## 

## IN-LINE BEFORE, ADD - Before a piece of code in a code line, add this piece of code 

############################################################## 



# 

#-----[ OPEN ]------------------------------------------ 

# 

templates/subSilver/posting_body.tpl 



# 

#-----[ FIND ]------------------------------------------ 

# 



<!-- END privmsg_extensions --> 



# 

#-----[ AFTER, ADD ]------------------------------------------ 

# 



<SCRIPT language="JavaScript"> 

<!-- 

function highlightmetasearch() { 

document.post.message.select(); document.post.message.focus(); 

} 

function copymetasearch() { 

highlightmetasearch(); 

textRange = document.post.message.createTextRange(); 

textRange.execCommand("RemoveFormat"); 

textRange.execCommand("Copy"); 

alert("This post has been copied to your clipboard.\nIf this post is lost when you submit it you can easily repost it.\nAlways use this feature before posting! - \nwww.able2know.com"); 

   } 

// --> 

</SCRIPT> 



# 

#-----[ FIND ]------------------------------------------ 

# 

  <tr> 

      <td colspan="9"> 

          <span class="smalltext"> 

    <textarea name="message" rows="15" cols="35" wrap="virtual" style="width:450px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">{MESSAGE}</textarea> 

       </span> 

           </td> 

  </tr> 

# 

#-----[ AFTER, ADD ]------------------------------------------ 

# 



<tr><td colspan="9" align="right"> 

     <script language="JavaScript" type="text/javascript"> 

<!-- 

if ((navigator.appName=="Microsoft Internet Explorer")&&(parseInt(navigator.appVersion)>=4)) { 

document.write('<INPUT type="button" class="button" value="COPY TO CLIPBOARD" onClick="copymetasearch();">'); 

} else { 

document.write('<INPUT type="button" class="button" value="HIGHLIGHT TEXT" onClick="highlightmetasearch();">'); 

} 

// --> 

</script> 

  </td></tr> 





# 

#-----[ SAVE/CLOSE ALL FILES ]------------------------------------------ 

# 

# EoM

Topic Stats
Top Replies
Link to this Topic

Type: Discussion • Score: 2 • Views: 34,767 • Replies: 15

No top replies

Umm...You're not speaking english
are you??

0 Replies

I've added this excellent code to http://surfsafely.com/affiliate.html.

It works great but I do have a question. I have three separate textareas to copy from. I may be adding more later on. My field names are formname1/text2copy1, formname2/text2copy2, etc. For each pair I needed to create unique corresponding scripts in the head. Is there a simple way to create just one script in the head and have it read the formname/text2copy fields from the document?

0 Replies

Re: Javascript - Control C textarea script

Craven de Kere wrote:

textRange.execCommand("RemoveFormat");
textRange.execCommand("Copy");

I haven't really used much JavaScript, and as so the execCommand function was something new to me. Usefull indeed. Here are all the possible command identifiers for it:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp

0 Replies

surfsafely, do you want it to append all the text fields to one string to copy all together to the clipboard?
If that's what you want I can modify the code for you, but I suspect that's not exactly what you'd like it to do.

0 Replies

WOW! THANKS FOR THE QUICK RESPONSE!

Each one is separate. If someone wants to insert search form 1 on their web site they get the code from the first textarea and so on.

0 Replies

surfsafely wants to have the header script work for multiple text areas. That way each form and textarea won't need its own script in the header.

It's possible, but it'd require a bit of tricky javascript, since you can place that header script in the body I suggest just putting each textarea's code right before the form it will copy.

I'm working on a large amount of projects so am unable to modify the script at this time.

0 Replies

Thank you, Craven. As someone who tries to support multiple browser platforms every chance I get, I'm just glad the script you created is not the run-of-the-mill ie4+ only that I found so many of during my search.

As I stated, I did get yours to work just fine by making the formname and text2copy fields unique for each textarea/javascript pair. I just also like to consolidate code every chance I get to keep bandwidth usage as low as possible and load time as quick as possible. It would be nice to be able to reuse the header script for each textarea. Not mission critical by any means.

Thanks for a great script just the same!

0 Replies

surfsafely,

You're welcome!

Most of the copy text area scripts only work with IE because only IE has this ability. The thing is, other broswers have the select all option so it can be made to degrade to that (most other scripts just degrade by simply not showing the button).

I noticed that most other scripts just copy and the user can't tell if the text has actuallly been copied or not.

So I took all these scripts and combined them so that it both degrades gracefully and provides an alert to tell the user that the text has been copied.

I do have a suggestion, if you have each of those scripts in the header you might consider moving them just above each form. That way the page will appear to load a bit faster because the body of the page will start loading more quickly.

If I get the chance (I am redesigning Able2Know right now) I'll make the script work with multiple text areas.

0 Replies

Hi =) I just installed your hack and I love it! I wanted to know if there
is a way to get a Paste from Clipboard button to the right of the copy to clipboard button? It would be sweet if there was a javascript way to paste from the clipboard. I just don't know enough about it to mess with it
myself =(

Also members of my forum are happy with the button but they suggested that instead of a copy button it is a checkbox in the user profile that allows you to automagically copy when you hit the submit button. That way the most recent post is always in the clipboard and they have the option of either hitting the copy button and doing it manually on a post by post basis or have it auto copy on every post.

Yes. Some of my users need things dummy proof.

0 Replies

Ok, the paste button is a piece of cake. Just add the following snippets.

I'll clean it all up later and combine the scripts into one, but here it is in case you don't want to wait.

Put the following below the first Javascript.

Code:

<script>



function a2kpaste() {

     var rng = document.selection.createRange();

     rng.execCommand("paste");

}

</script>

Then put the following after the copy buttons.

Code:<input type="button" class="button" value="Paste" onclick="document.post.message.focus(); a2kpaste();">

I have not tested it, so let me know if you encounter any problems or need help.

Thanks for the suggestion and I'll add it to a future version of this mod.

Now as to using a check button to copy the post there is a complicating issue.

First of all the copy button only works for Internet Explorer for other browsers it displays a different button that selects all of the text but does not copy it (because those browsers do not allow that function).

It'd be nice to make the submit button simply copy the text automatically (I'd not even use the checkbox but just copy automatically) but it will be a function that is only compatible for Internet Explorer. To avoid making your forum posing available only to Internet Explorer I need to make the script detect browsers and act accordingly.

That's a change I will need to test on different browsers and I'm on a brand new puter and don't have all the browsers installed.

So I'll have to do it later when I have more time. It might take me a while to get around to it as I've been very busy.

0 Replies

Thanks very much! The paste button is pretty sweet. Right now I just have a note in the alert to inform users to use ctrl+v to paste from the clipboard (and mac is apple+v).

=^_^=

0 Replies

Only problem reported so far is that it doesn't work with Modzilla. =)

0 Replies

The paste button? It can be displayed only for IE using the same code above that displays the copy button only for IE.

0 Replies

Yea, and since that's the only issue that's been brought up I'd say it's working very well =^_^=

0 Replies

Cut paste copy AND replace buttons !!!
HEY!
i'm new to this forum but just wanted to help
here is a little code i grabbed..it may help better than the one given above...it is all stuck togethere and you won't need to edit anything unless you want to have multiple text areas. Laughing

hopea thisa helpsa

Sopy stuff below line!
-------------------------------------------------

<html>
<head>
<script type="text/javascript" language="javascript">

</script>
</head>
<body>

</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<script>
var IE4 = (document.all) ? true : false;
var text;

function copy(){
var val = document.getElementById('text1').value;

if (IE4)
text = document.selection.createRange().text;
else
text = document.getSelection().createRange().text;

clipboardData.setData('TEXT' , text);

}

function paste(dest)
{
insKarrot(dest, clipboardData.getData('TEXT'))
}

function cut(){
copy();
var target = document.getElementById('text1');
target.value = target.value.replace(clipboardData.getData('TEXT'), '');

}

function storeCaret (obj) {
if (obj.createTextRange)
obj.caretPos = document.selection.createRange().duplicate();
}

function insKarrot (destObj, txt)
{
if (destObj.createTextRange && destObj.caretPos)
{
var caretPos = destObj.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? txt + ' ' : txt;
}
else
destObj.value = txt;
}

</script>
<form>
<textarea rows="10" cols="25" id='text1' onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">
Select any text you wish to copy to the next textarea
</textarea>
<br><br>
<input type="button" value='Cut' onclick="cut()"><br>
<input type="button" value='Copy ' onclick="copy()"><br>
<input type="button" value='Paste ' onclick="paste(this.form.text1)"><br>
<input type="button" value='Replace ' onclick="insKarrot(this.form.text1,clipboardData.getData('TEXT'))"><br></form>

</body>
</html>

0 Replies

Javascript - Control C textarea script

Related Topics

Quick Links

My Account

able2know