在文本区域中添加字形显示文本而不是字形

Question

当我们点击 glyphicon 时，我需要一个功能来动态地进入文本区域。

$(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>

在搜索之前，请使用代码片段查看实际问题。

Answer 1

您可以将 html 标记放入 input 或 textarea，但它不会被这样解析。（如果是的话，那将是一个巨大的安全漏洞！）相反，输入只是……文本。因此，如果您想使用该文本中的 html，则需要另一个步骤。

为了将图标跨度呈现为实际样式 html 跨度，您需要从输入字段中捕获它们，解析它们，然后显示呈现的版本。您可以查看基于 Markdown 或其他所见即所得编辑器如何处理此问题，但基本上，实际输入中的 <span> 始终只是 <span>，字符串。

Answer 2

您无法在 TextArea 中显示呈现的 HTML。

作为解决方法，您可以添加一个 <div>，并将 contenteditable 属性设置为 true

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

如果您希望它看起来更像一个 TextArea，您也可以使用 <pre> 标签。

这是一个工作示例：

$(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>

在文本区域中添加字形显示文本而不是字形

Adding glyphicons in textarea is showing text instead of glyphicon

html

javascript

jquery

glyphicons

bootstrap-4