JS實現(xiàn)設(shè)置textarea中的圖片不處于編輯狀態(tài)

2012/11/8 10:15:40作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

【實例描述】

有時需要在文本區(qū)域內(nèi)插入圖片，類似在線編輯器的效果。當(dāng)圖片顯示在文本區(qū)域后，如要用鼠標(biāo)選中圖片則會出現(xiàn)類似于編輯效果的8個邊角。本例學(xué)習(xí)如何去掉這些邊角，使圖片處于不可編輯狀態(tài)。這在設(shè)計在線編輯器時非常有效。

【實例代碼】

<html>
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=gb2312">
<title>New Page-學(xué)無憂（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)     
//動態(tài)添加圖片到文本區(qū)域
img1.UNSELECTABLE=true;  
//取消圖片的選中操作
</script>     
</body>
</html>

【運行效果】

設(shè)置textarea中的圖片不處于編輯狀態(tài)運行效果

【難點剖析】

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

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點擊：JS實現(xiàn)設(shè)置textarea中的圖片不處于編輯狀態(tài) 進行本實例源碼下載

標(biāo)簽： JS實現(xiàn) textarea 圖片