Member Avatar for veledrom

Hi,

Code below works fine up to hr. For some reason, html code appears as is in textarea. It should first appear as notmal text. Anyone know why?

Thanks

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin:8px; font-size:20px; color:blue; 
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>
    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>
    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>
  <br />

  <hr />

  <div>Now click me to turn plain text into html code in textarea below.</div>
  <br />
  <textarea rows="3" cols="20"><b>Bold</b></textarea>

<script>
    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });

    $("div").click(function () {
      var htmlStr = $('textarea').html();
      $('textarea').text(htmlStr);
    });
</script>

</body>
</html>
  • 4 Contributors
  • 6 Replies
  • 192 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by veledrom
Member Avatar for niranga

You can not apply different formatting to different parts of the same textarea, i.e. you can not make some text bold and some text italic at the same time inside a textarea.

It does not identify html tags as html tags when you put in between textarea tags. So that is why you see <b>Bold</b> as it is.

Member Avatar for veledrom

You can not apply different formatting to different parts of the same textarea

I'm not trying to do that What I'm saying is a textarea shouln't show html tags.

Member Avatar for dcdruck

If you have HTML tags between <textarea></textarea> tags, they will be treated as plaintext content in the textarea, not as HTML tags. The browser will not interpret them as HTML tags, but will basically convert the < to &lt; and > to &gt; and you will see the tags printed on the page as regular text.

Member Avatar for veledrom 
<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <textarea rows="3" cols="20"><b>Bold</b></textarea>

</body>
</html>

When you open page above , what you see in textarea is this: <b>Bold</b>, not this: Bold neither somethimg else as you claim.

Member Avatar for veledrom

var htmlStr = $('textarea').text();
$('textarea').text(htmlStr.replace(/(<([^>]+)>)/ig,""));

Excellent my friend. Thank you very much

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.