当前位置:asp编程网>技术教程>Css3教程>  正文

利用层模拟在textarea中插入图片

1970-01-01 08:00:00   来源:www.aspbc.com    作者:佚名   浏览量:4299   收藏

最近一个客户要求这个功能----在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">
/*
 功能:利用层实现在textarea中插入图片
 开发:wangsdong
 来源:www.aspprogram.cn
 原创作品,转裁请保存此信息
*/
    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" onsubmit="document.getElementById('content').value=document.getElementById('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;"
          onclick="getPos();"   onkeyup="getPos();"  contenteditable="true">
          abcdefg</div>
   <div>
   <input type="hidden" value="" name="content" id="content">
   <input type="submit" value="提交" name="submit">
   </div>
</form>
</body>
</html>

源码下载地址:http://www.aspbc.com/code/showcode.asp?id=73



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网