When i type code , dynamic area does not show the code as text

Question

When i type for example <input type="checkbox"/> in textarea , it doesn't show <input type="checkbox"/> as a text, it shows a checkbox .

Why is this happening?

How can i get rid of this?

JSFIDDLE

<div id="wrapper">
      <textarea id="textarea"></textarea>
      <button id="add">Add</button> 
      <button id="clear">Delete All</button>
</div>

.

$("#add").click(function() {
  var userList = $('#textarea').val();
   $('#textarea').val('');
   var newitem ='<p>'+ '*' +userList+'</p>';
   $('#list').append(newitem);
});

where you create checkbox in js? – uzaif Apr 13 '16 at 10:58 — uzaif, Apr 13 '16 at 10:58

score 3 · Accepted Answer · answered Apr 13 '16 at 10:58

Because you've retrieved the text, and then used it as markup:

$("#add").click(function() {
   var userList = $('#textarea').val();      // Retrieves the text
   $('#textarea').val('');
   var newitem ='<p>'+ '*' +userList+'</p>'; // Uses it as markup
   $('#list').append(newitem);               // on these two lines
});

If you don't want to use it as markup, use jquery's text function:

$("#add").click(function() {
  var userList = $('#textarea').val();
   $('#textarea').val('');
   var newitem = $('<p>').text('*' +userList);
   $('#list').append(newitem);
});

There, instead of using string concatenation to create the p element, I create the p element ($('<p>')), then append the text to it as text, and then append that to the list.

Alternately, you can just encode < and & as < and &:

$("#add").click(function() {
   var userList = $('#textarea').val();                              // Retrieves the text
   userList = userList.replace(/&/g, "&amp;").replace(/</g, "&lt;"); // Encodes & and < as HTML entities
   $('#textarea').val('');
   var newitem ='<p>'+ '*' +userList+'</p>';                         // Uses it as markup
   $('#list').append(newitem);                                       // on these two lines
});

...but I'd use text.

gurvinder372 · Answer 2 · 2016-04-13T11:03:59.500

You need to escape the HTML entities, fiddle

$("#add").click(function() {
  var userList = escapeHtml($('#textarea').val());
   $('#textarea').val('');
   var newitem ='<p>'+ '*' +userList+'</p>';
   $('#list').append(newitem);

   var list=$("#list").html();
   localStorage.setItem('list', list);   
   return false;
});
 if (localStorage.getItem('list')) {
  $('#list').html(localStorage.getItem('list'));
}  
$('#clear').click(function() {
  window.localStorage.clear();
  window.location.reload();
  return false;
});

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

score 0 · Answer 3 · answered Apr 13 '16 at 11:00

Try to set that content as text not as a html,

   //...........Other code
   var newitem =document.createElement('p');
   newitem.textContent =  '*' +userList ;
   $('#list').append(newitem);
   //...........Other code

DEMO

If you store user's content to DB and set it as a plain html in UI, then that will create a way for your users to do an XSS attack.

When i type code , dynamic area does not show the code as text

3 Answers3

DEMO