CODEWITHSUNDEEP
html
Zain Ali
Zain Ali

Reputation: 15983

Add link to appear inside the textarea box

Is there a way that a user can enter a URL in a textarea and have the link actually display and work as a hyperlink?

For example: 

<textarea name="Miscell" cols="110" rows="5" wrap="Virtual" class="noborder"> 
          blah blah blah= 
          <a href="http://www.googel.com/">Google</a> 
          blah blah blah
</textarea>

No link is displayed: what can I do?

I'm not creating that site: I'm just trying to change it using Firebug.

Upvotes: 23

Views: 93370

Answers (3)

Zasz
Zasz

Reputation: 12538

Use a DIV like this :

<div id="box">
<h4>My Links</h4>
<p><a href="URL" title="Description">Text Description</a></p>
<p><a href="URL" title="Description">Text Description</a></p>
</div>

And make sure this script tag comes after this div element

<script type="text/javascript">
document.getElementById("box").contentEditable='true'; 
</script>

If you are using jQuery it does not matter where u put the script tag, just put it in $(document).ready(); This will make the div editable. And this means the links also will be editable. I tested it out - works in chrome and ff.

This will make the div editable, but you need to give the users some visual cue to tell them that this is editable - Use CSS to make it look like a text area.

Upvotes: 12

Dmitriy R
Dmitriy R

Reputation: 613

Not exact solution but you can look how it is implemented in RTF editors, just take simplest one as niceditor, simple JS code will convert any textarea in editable area with allowed HTML tags.

Upvotes: 1

nidhin
nidhin

Reputation: 6930

You can't place any 'Active Link' inside a text area. A text area is designed to displaying text only content. Instead of that you can use div and using some css make div as a text area.

Eg: (Not my code)

    <style type="text/css">
#box {
width: 400px;
margin: 0 auto;
overflow: auto;
border: 1px solid #0f0;
padding: 2px;
text-align: justify;
background: transparent;
}
</style>

HTML...
<body>

<div id="box">
<h4>My Links</h4>
<a href=">• Paragraph One Here.</p><p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
<p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
<p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
<p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
<p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p>
</div>

Upvotes: 23

Related Questions