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
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
  • 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

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.

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

626 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