Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add link to appear inside the textarea box

Tags:

html

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.

like image 875
Zain Ali Avatar asked Aug 01 '11 07:08

Zain Ali


People also ask

Can I put Div inside textarea?

No, it is not possible(it will not render the UI). If you want to show form fields why are you using textarea ? You can just use normal html.

How do I display HTML content in textarea?

Complete HTML/CSS Course 2022Use the <textarea> tag to show a text area. The HTML <textarea> tag is used within a form to declare a textarea element - a control that allows the user to input text over multiple rows. Specifies that on page load the text area should automatically get focus.

Can you put HTML in textarea?

This is possible with <textarea> . You only need to use the Summernote WYSIWYG editor. It interprets HTML tags inside a textarea (namely <strong> , <i> , <u> , and <a> ).


2 Answers

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>
like image 176
nidhin Avatar answered Oct 21 '22 20:10

nidhin


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.

like image 35
Zasz Avatar answered Oct 21 '22 21:10

Zasz