Solved

Textarea contains HTML/Javacript: Copy All

Posted on 2002-06-27
13
443 Views
Last Modified: 2008-02-01
I would like to have a textarea box that contains HTML code and Javascript to 1.) retain the precise code and 2.) have a copy all button beneath the textarea box to copy the code into the users clipboard. I am using the following so far:

<textarea cols="108" rows="18" name="topnav" wrap="off" readonly></textarea>

I noticed that the special characters &nbsp; and &amp; are appearing in the textarea box as a space and as an & sign, not as the code. I need them to appear as code, i.e. &nbsp; and &amp;

Any ideas on how to accomplish this?

spreeez
0
Comment
Question by:spreeez
  • 6
  • 6
13 Comments
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
As code:
&nbsp; = &amp;nbsp;
&amp; = &amp;amp;

Basically instead of the & you place an additional &amp;

To copy to clipboard
<input type=button onClick="clipboardData.setData("Text", this.form.topnav.value)">

CJ

0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
Textarea can only have text. If you want to allow anything else, you have to use activeX controls, java applets, or custom designed controls.

If you type in &nbsp;, it should stay &nbsp;. If it's changing to an actual space, it's most likely the way you're copying it. Don't copy anything with code from anything other than a strictly code editor -- no WYSI(N)WYG editors will work correctly. Notepad should work just fine.
0
 

Author Comment

by:spreeez
Comment Utility
Thanks for the quick post! The clipboard functionality did not work. I tried:

<form name="topnavform">
<textarea cols="108" rows="18" name="topnav" wrap="off" readonly>code &amp;amp; more code</textarea>
<input type="button" value="Copy All" onClick="clipboardData.setData("Text", this.form.topnav.value)">
</form>

Do I need to change this.form to the name of my form?

spreeez
0
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
my mistake, typo:

<form name="topnavform">
 <textarea cols="108" rows="18" name="topnav" wrap="off" readonly>code &amp;amp; more code</textarea>
 <input type="button" value="Copy All" onClick="clipboardData.setData('Text', this.form.topnav.value)">
</form>
0
 

Author Comment

by:spreeez
Comment Utility
Webwoman,

Yes, I pasted my HTML code and Javascript straight from a text editor. I wanted to basically insert a fairly complex bit of HTML code (including a form a Javascript) into a textarea box, and allow developers to click one button and have all the code in their clipboard. It seemed to work aside from those two things I mentioned above.

Maybe I'm approaching things at the wrong angle -- do you have any suggestions as to how else I could get this done -- that would be very easy for people to copy various bits of code, preferably by one click?

spreeez


0
 
LVL 22

Accepted Solution

by:
CJ_S earned 100 total points
Comment Utility
Let me make my last comment an answer :-)
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:spreeez
Comment Utility
CJ_S,

I would like to accept your answer -- it solves number 2 of my question, but it does not completely satisfy number 1 (it does not retain the precise code, and requires me to alter it). If you have no further ideas, I will award you the points but, hopefully you can help:

Can you think of a way to accomplish the following: have a chunk of code on a webpage, and have a "Copy All" button that copies it to the users clipboard? It doesn't necessarily have to be in a textarea box.

I would really like to be able to do the below in which the textarea value was populated by a Server Side Include (SSI):

<form name="topnavform">
<textarea cols="108" rows="18" name="subnav" wrap="off" readonly>
<!--#include virtual="/ssi/topnav.txt"-->
</textarea><br>
<input type="button" value="Copy All" onClick="clipboardData.setData('Text', this.form.topnav.value)">
</form></p>

I tried this and encountered the same problem with the &nbsp;'s and &amp;'s. Webwoman mentioned active controls etc. Maybe that or simply a text input, or using ASP to store the SSI?

spreeez
0
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
It can only work if you use the following:

<form name="topnavform">
 <textarea cols="108" rows="18" name="topnav" wrap="off" readonly></textarea>
 <input type="button" value="Copy All" onClick="clipboardData.setData('Text', this.form.topnav.value)">
</form>

with the following javascript:
  function document_onload()
  {
       document.forms["topnavform"]["topnav"].value = "code &amp; more code";
  }
  window.onload=document_onload;

So the fllowing might work:
  function document_onload()
  {
       document.forms["topnavform"]["topnav"].value = "<!--#include virtual="/ssi/topnav.txt"-->";
  }
  window.onload=document_onload;

But I give the little change.

if you can use ASP you can do:
<textarea cols="108" rows="18" name="topnav" wrap="off" readonly><%=Replace(THETEXT, "&", "&amp;")%></textarea>

That's all the options you have.

CJ
0
 

Author Comment

by:spreeez
Comment Utility
The first idea worked. I tried setting it equal to the SSI and it did not work. Can I somehow set a variable equal to the value of the SSI and then set the value, something like:

document.forms["topnavform"]["topnav"].value = ssivalue1;

Also, the third idea would not work because there is a Javascript within that code that uses & as part of the code -- I wouldn't want to replace all instances of &.

So, any more ideas CJ_S? So close!! Almost there...

spreeez
0
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
Probably didn't work because of the lines.

Anyway,. last one which works:

<div id="mH" style="position:absolute;visibility:hidden;">code &amp; more code</div>
 <form name="topnavform">
 <textarea cols="108" rows="18" name="topnav" wrap="off" readonly></textarea>
 <input type="button" value="Copy All" onClick="clipboardData.setData('Text', this.form.topnav.value)">
</form>

with
function document_onload()
 {
      document.forms["topnavform"]["topnav"].value = document.all["mH'].innerHTML;
 }
 window.onload=document_onload;
0
 

Author Comment

by:spreeez
Comment Utility
CJ_S,

Nice work! Not sure what your last post accomplishes, but you've gotten me very close to solving this issue.

I've learned that the following SSI will not work because...

 function document_onload()
 {
      document.forms["topnavform"]["topnav"].value = "<!--#include virtual="/ssi/topnav.txt"-->";
 }
 window.onload=document_onload;

The SSI happens on the server side and the Javascript happens on the client side. Therefore, the Javascript cannot grab the value of the SSI, because it is too late. I'm off to the PERL section to see if I can grab the SSI file contents and then insert that into my Javascript. Thanks again for your help.

spreeez
0
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
Glad to help. But why grade B?
0
 

Author Comment

by:spreeez
Comment Utility
Well the answer didn't satisfy the requirement of the questions -- "retain the precise code", so I thought a B was appropriate. True, I guess it couldn't be done anyway because of my setup, so I guess that almost made it an unanswerable one. Next time you'll get an A!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Serialize On-Key-Up Functions 3 28
Angular JS question 24 37
Calculate days between two dates 7 34
Problem to page 4 16
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now