Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 454
  • Last Modified:

Textarea contains HTML/Javacript: Copy All

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
spreeez
Asked:
spreeez
  • 6
  • 6
1 Solution
 
CJ_SCommented:
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
 
webwomanCommented:
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
 
spreeezAuthor Commented:
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
Technology Partners: 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!

 
CJ_SCommented:
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
 
spreeezAuthor Commented:
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
 
CJ_SCommented:
Let me make my last comment an answer :-)
0
 
spreeezAuthor Commented:
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
 
CJ_SCommented:
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
 
spreeezAuthor Commented:
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
 
CJ_SCommented:
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
 
spreeezAuthor Commented:
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
 
CJ_SCommented:
Glad to help. But why grade B?
0
 
spreeezAuthor Commented:
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

Industry Leaders: 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!

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now