Solved

Textarea contains HTML/Javacript: Copy All

Posted on 2002-06-27
13
448 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

734 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