原文地址：http://www.cnxinhua.com/html/17688.html
最近一个客户要求这个功能----在textarea中插入图片，用来模仿UBB代码，但又不同于UBB，原因是UBB点击某个图片的时候，在textarea中插入的是一些特殊的字符，而他要求的是将图片插入到textarea中。
太难实现了，原因是textarea中只允许插入文字，不允许插入图片，找了很长时间，最终还是没有找到，最后只能改用其他方法模拟。
找了很久，找到div有一个属性 contenteditable，当这个属性为true时，此层可编辑；当这个属性为false时，层不可编辑。
当层可编辑的时候，就像textarea了，但是，当输入的文字的行数多的时候，层会自动加高，这样给这个层加上 overflow:auto;属性就可以了。
以下是我的代码，与大家共享
index.html
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>利用层模拟在textarea表单中插入图片</title>
<script language="javascript" type="text/javascript">
var pos;
function getPos()
{
pos = document.selection.createRange();
}
function fun(str)
{
if(pos!=null)
{
// pos.text="插入文字内容";
pos.pasteHTML("<img src=\""+str+"\">");
//pos.pasteHTML("<br/>文本框控件:<input id='Text1' type='text' />");
//释放位置
pos=null;
}
else
{
alert("没有正确选择位置");
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="1.asp" οnsubmit="document.getElementByIdx_x('content').value=document.getElementByIdx_x('myDiv').innerHTML">
<div style="width:350px;">
<img src="zhuangtai/10U01a127.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
<img src="zhuangtai/10U01aH12.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
<img src="zhuangtai/10U01b5G0.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
<img src="zhuangtai/10U01bO5.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
<img src="zhuangtai/10U01bS3.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
<img src="zhuangtai/10U01c029.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
<img src="zhuangtai/10U01cM1.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
<img src="zhuangtai/10U0193a11.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
<img src="zhuangtai/10U0195L8.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
<img src="zhuangtai/10U01921G4.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
<img src="zhuangtai/10U0193202.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
<img src="zhuangtai/10U0195536.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
<img src="zhuangtai/10U0196434.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
<img src="zhuangtai/10U01946115.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
<img src="zhuangtai/10U01960113.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
</div>
<div id="myDiv" style="width: 300px; height: 100px; border: black 1px solid; font-size:small; line-height:1; overflow:auto;"
οnclick="getPos();" οnkeyup="getPos();" contenteditable="true">
abcdefg</div>
<div>
<input type="hidden" value="" name="content" id="content">
<input type="submit" value="提交" name="submit">
</div>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
