當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > JS實現設置textarea中的圖片不處于編輯狀態

JS實現設置textarea中的圖片不處于編輯狀態

2012/11/8 10:15:40作者：佚名來源：網絡

移動端

【實例名稱】

JS實現設置textarea中的圖片不處于編輯狀態

【實例描述】

有時需要在文本區域內插入圖片，類似在線編輯器的效果。當圖片顯示在文本區域后，如要用鼠標選中圖片則會出現類似于編輯效果的8個邊角。本例學習如何去掉這些邊角，使圖片處于不可編輯狀態。這在設計在線編輯器時非常有效。

【實例代碼】

<html>
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=gb2312">
<title>New Page-學無憂（www.yzddtk.cn）</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>

【運行效果】

設置textarea中的圖片不處于編輯狀態運行效果

【難點剖析】

本例的難點有兩個：動態在文本區域中添加圖片標簽、設置圖片的選中狀態。默認情況下不允許將img標簽直接寫到textarea標簽內，所以本例使用。appendChild”方法實現動態添加img元素?！癠NSELECTABLE”屬性用來指定當前元素不可被選中。

【源碼下載】

為了JS代碼的準確性，請點擊：JS實現設置textarea中的圖片不處于編輯狀態進行本實例源碼下載

標簽：圖片

上一篇：JS實現QQ圖片一閃一閃的效果
下一篇：PhotoShop簡單快速為外景美女照片美白

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频