Search code examples
javascriptjqueryhtmlbootstrap-4glyphicons

Adding glyphicons in textarea is showing text instead of glyphicon

When we click on glyphicon I need a functionality to get then entered into the textarea dynamically.

$(document).ready(function(){
        //Click Event of glyphicon class  
		$(document).on('click','.glyphicon',function(){
             
			var previous_content = $.trim($("#area").html());  
			var new_icon = '<span class="'+$(this).attr('class')+'"></span>';
      
			 //*****The below method of create element is also not working
             //var new_icon = document.createElement("span");
		     //new_icon.setAttribute('class', $(this).attr('class'));
      
			var new_content = previous_content+new_icon;
			$("#area").html(new_content);
		    
		});
    
});
.glyphicon {
    	cursor: pointer;
    }
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<textarea id="area" rows="10" cols="10"></textarea>
<p>Asterisk icon: <span class="glyphicon glyphicon-asterisk"></span></p>
<p>Copyright-mark icon: <span class="glyphicon glyphicon-copyright-mark"></span></p>     
</body>
</html>

Before searching please use snippet to see the actual issue.

Solution

  • You can't display rendered HTML in a TextArea.

    As a work around you can add a <div> with the contenteditable attrbibute set to true

    <div id="area" contenteditable="true"></div>

    You can also use a <pre> tag if you want it to look and feel more like a TextArea.

    Here's a working example:

    $(document).ready(function() {
  //Click Event of glyphicon class  
  $(document).on('click', '.glyphicon', function() {

    var previous_content = $.trim($("#area").html());
    var new_icon = '<span class="' + $(this).attr('class') + '"></span>';

    //*****The below method of create element is also not working
    //var new_icon = document.createElement("span");
    //new_icon.setAttribute('class', $(this).attr('class'));

    var new_content = previous_content + new_icon;
    $("#area").html(new_content);

  });

});
    .glyphicon {
  cursor: pointer;
}

#area {
  width: 200px;
  height: 140px;
  border: 1px solid black;
}
    <!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="area" contenteditable="true">This &lt;div&gt; tag is editable just like a TextArea.<br /></div>
  <p>Asterisk icon: <span class="glyphicon glyphicon-asterisk"></span></p>
  <p>Copyright-mark icon: <span class="glyphicon glyphicon-copyright-mark"></span></p>
</body>

</html>