在textarea 中添加图片<原创>

前台代码：
1.用户输入文本框，此处使用HTML控件，一定要表明Name属性才能供后台代码调用，此处一个文本框用于用户输入，另一个用于保存用户输入（可以更好的实现，限于时间原因此处暂时使用比较笨的方法现行处理）
 

 <div id="divFace">

<asp:DataList ID="DLFace" runat="server" Height="24px" HorizontalAlign="Center" RepeatColumns="17"

RepeatDirection="Horizontal" Width="408px">

<ItemTemplate>

<img alt="" src="image/QQFace/<%# Container.DataItem %>.gif" style="border: none;"

width="24px" height="24px" onclick="InsertPic('<%# Container.DataItem %>')"

onmousemove="this.style.cursor = 'pointer'" />

</ItemTemplate>

</asp:DataList>

</div>

<div id="divInput">

<textarea id="taInput" cols="20" rows="2" name="taInputName" style="width: 408px;

height: 100px;"></textarea>

<textarea id="taSaveInput" name="taSaveInputName" style="width:0px;

height: 0px;"></textarea>

</div>

JS代码：
 

 
<script language="javascript" type="text/javascript">



//点击图片时触发

function InsertPic(picName)

{

//取得taInput标签

var input=document.getElementById("taInput");



//取得taInput标签的内容，包括HTML标签

var info=document.getElementById("taInput").innerHTML;



//创建名为IMG的标签

var img = document.createElement("IMG");



//设置图片路径

var strImgSrc= "image/QQFace/";

strImgSrc+=picName;

strImgSrc+=".gif";



//为IMG标签的src属性赋值

img.src =strImgSrc;



//在taInput标签下插入一个子节点，次子节点即为之前声明的IMG标签

input.appendChild(img);



//此时再次取得taInput标签的内容，包括HTML标签，输出显示，调试时使用

info=document.getElementById("taInput").innerHTML;

alert(info);



//调用另一个JS函数，将taInput标签的内容保存在一个隐藏标签中，共后台代码使用

SaveInput()

}



//将taInput标签的内容保存在一个隐藏标签中，共后台代码使用

function SaveInput()

{

//取得taInput标签的内容，包括HTML标签

var strNewInfo=document.getElementById("taInput").innerHTML;



//取得隐藏标签taSaveInput

var inputSave=document.getElementById("taSaveInput");



//将taInput标签的内容赋给隐藏标签taSaveInput

inputSave.value=strNewInfo;



//取出隐藏标签taSaveInput的内容测试结果

var strSaveInfo=inputSave.innerHTML;

alert(strSaveInfo);

}

</script>



后台代码：
1.取出隐藏标签taSaveInput的内容，此处一定要使用标签的Name（taSaveInputName）来取得，使用ID无法实现

 

string strMsg = Request.Form.Get("taSaveInputName").ToString();

2.添加颜色

 strMsg = "<font color=" + strFont + ">" + strMsg + "</font>";