Solved

Textarea contains HTML/Javacript: Copy All

Posted on 2002-06-27
13
447 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
13 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 7114849
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
ID: 7114856
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
ID: 7114863
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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 22

Expert Comment

by:CJ_S
ID: 7114873
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
ID: 7114876
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
ID: 7114896
Let me make my last comment an answer :-)
0
 

Author Comment

by:spreeez
ID: 7114933
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
ID: 7114955
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
ID: 7114984
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
ID: 7114997
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
ID: 7115026
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
ID: 7115037
Glad to help. But why grade B?
0
 

Author Comment

by:spreeez
ID: 7115046
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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

696 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