Preserving hyperlinks in text that is copy-pasted into a textarea box

Posted on 2007-04-10
Last Modified: 2008-02-01
Let's say you have this text on a website:

Hello <a href="">Google</a>

1.  I would like the user to copy this text with their mouse and paste it into a textarea box on my web page.   Currently this will be pasted as "Hello Google".

2.  The question is how can I paste it into the textarea box and preserve the hyperlink, so the actual text within the textarea box is:
Hello <a href="">Google</a>

Question by:clurey
  • 3
LVL 54

Expert Comment

ID: 18887118
I assume the text on the website is actually just Hello Goole where google is a link and the HTML is as you have above.  You can't do this just with javascript and a normal text area.  You will need to use a "rich" editor.  I don't have one to personally recommend but I know the Fckeditor ( will do this.  Let me know if you want some other suggestions.  I have seen recommendation here and on other sites for these but have not really had to develop sites with them.  If I recall correct has a list of (some of) these editors.

If the "text" on the web page is actually the HTML and I misunderstood the question then let me know.  Let me know if you have a question or need more information.


Author Comment

ID: 18892555
Thank you.  You interpreted the solution correctly however I would like to do this without using a 3rd party wysiwyg editor -- I dont want all that functionality.   I want the same operation as a textarea with preservation of the hyperlinks.
LVL 54

Accepted Solution

b0lsc0tt earned 500 total points
ID: 18893257
It can't be done with just javascript and/or a normal textarea.  There are a couple of reasons.

First, the normal text area doesn't interpret html.  In other words Hello Goole would just show up as that phrase.  There is no way to make Google a link in a textarea.  You can show html code in a textarea but it seems like you want the link just like the source you copied from.

Another problem is Javascript on its own can't read the clipboard or other sites.  Security in the browser limits what it can do.  This limit prevents any Javascript code from even "seeing" the copied text so there is no way for it to create the link.  In other words you can use Javascript to manipulate text and to set the value of a textarea but there is no way for it to get the text (i.e. Hello Google) in this situation.

I hope this helps.  If you provide input on your page for the html and text then you can use Javascript to put it in the textarea.  I can help with that.  It will not be a link though, just text with html code shown.  Let me know if you have a question or need more information.

LVL 54

Expert Comment

ID: 18893289
Do you not mind a 3rd party solution but you just don't need all of the extras (i.e. the toolbar, etc)?  If so, there are option to configure the Fckeditor and others that would have a different look, etc.  If the problem is the toolbar, etc that is included with it then that doesn't mean an "HTML area" solution is eliminated.


Featured Post

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

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

Suggested Solutions

In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

773 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