Question

当我们点击glyphicon时，我需要一个功能，然后动态地输入textarea。

$(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或其他WYSIWYG编辑器如何处理此问题，但基本上，实际输入中的<span>始终只是<span>，即字符串。

Answer 2

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

作为一种解决方法，您可以添加<div> contenteditable attrbibute设置为true

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

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

这是一个有效的例子：

＆＃13;

$(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);

  });

});

＆＃13;

.glyphicon {
  cursor: pointer;
}

#area {
  width: 200px;
  height: 140px;
  border: 1px solid black;
}

＆＃13;

<!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>

＆＃13;

在textarea中添加glyphicons是显示文本而不是glyphicon

2 个答案: