如何通过javascript在textarea字段中插入图像？答案

【问题标题】：How to insert image in textarea field through javascript?如何通过javascript在textarea字段中插入图像？
【发布时间】：2015-02-18 07:35:34
【问题描述】：

这是我的代码：

<Script Language="JavaScript"> 
      function add1(x)
      {
          var oImg=document.createElement("img");
          oImg.src=x;
          document.getElementById("test").appendChild(oImg);
      }
</Script>

HTML

<body>
     <div>
          <textarea id="test" rows="10" cols="50"></textarea> 

          <input type="radio" name="emotion" id="sad" />
          <label for="sad"><img src="images/tango_face_sad.jpeg" alt="I'm sad" onclick="add1(this.src)" /></label>

          <input type="radio" name="emotion" id="happy" />
          <label for="happy"><img src="images/blush.jpeg" alt="I'm happy" onclick="add1(this.src)"/></label>
    </div>
</body>

它在 IE 上运行良好，但在 firefox 上不工作。我的代码有什么问题？？

【问题讨论】：

您不能在textarea 中放置img。
HTML : Is there any way to show images in a textarea?的可能重复
但它适用于 IE。Firefox 出现问题。
定义有效和无效。
Specification: 在 HTML 语法的文档中，title 和 textarea 元素可以包含可替换的字符数据。可替换的字符数据可以包含以下内容： 1) 文本，可选地包括“

标签： javascript jsp

【解决方案1】：

您不能直接在 textarea 控件中显示图像。

您可以获得的关闭是在其上叠加图像，但它不会成为文本区域中信息的一部分。也就是说，文本不会在它周围流动，并且在发布表单时它不会包含在 textarea 的数据中。

也许可写的 div（内容可编辑）更适合您的目的。

div{
    width:300px;
    height:200px;
    border: 1px solid #ccc;
}

<div contentEditable="true"> type here
    <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" />
</div>

试试这个：这里`http://jsfiddle.net/6bCRJ/

【讨论】：

我得到了解决方案。非常感谢！！