Solved

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

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

Hello <a href="http://www.google.com">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="http://www.google.com">Google</a>

0
Comment
Question by:clurey
  • 3
6 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
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 (http://www.fckeditor.net/) 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 http://www.htmlarea.com/ 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.

bol
0
 

Author Comment

by:clurey
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.
0
 
LVL 54

Accepted Solution

by:
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.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
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.

bol
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now