2012-11-08 来源:网络
【实例名称】
JS实现设置textarea中的图片不处于编辑状态
【实例描述】
有时需要在文本区域内插入图片,类似在线编辑器的效果。当图片显示在文本区域后,如要用鼠标选中图片则会出现类似于编辑效果的8个边角。本例学习如何去掉这些边角,使图片处于不可编辑状态。这在设计在线编辑器时非常有效。
【实例代码】
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>New Page-学无忧(www.xue51.com)</title> </head> <body> <textarea id=t1 cols=30 rows=3 ></textarea> <img src="http://img.baidu.com/hi/logo-pb.gif" id=img1> <script language="javascript"> t1.appendChild(img1) //动态添加图片到文本区域 img1.UNSELECTABLE=true; //取消图片的选中操作 </script> </body> </html>
【运行效果】
【难点剖析】
本例的难点有两个:动态在文本区域中添加图片标签、设置图片的选中状态。默认情况下不允许将img标签直接写到textarea标签内,所以本例使用。appendChild”方法实现动态添加img元素。“UNSELECTABLE”属性用来指定当前元素不可被选中。
【源码下载】
为了JS代码的准确性,请点击:JS实现设置textarea中的图片不处于编辑状态 进行本实例源码下载