-
contentEditable
鎖定
contentEditablehtml中的一個屬性。設置html的contentEditable=true時,即可開啓該元素的編輯模式。
- 外文名
- contentEditable
- 使用方法
- html、js
- 應 用
- 前端UI的美化
- 所需瀏覽器
- Firefox、Chrome、Safari、IE等
contentEditable簡介
HTML中的contentEditable的屬性可以打開某些元素的可編輯狀態.也許你沒用過contentEditable屬性.甚至從未聽説過.contentEditable的作用相當神奇.可以讓div或整個網頁,以及span等等元素設置為可寫。我們最常用的輸入文本內容便是input與textarea,使用contentEditable屬性後,可以在div,table,p,span,body,等等很多元素中輸入內容.
如果想要整個網頁可編輯,請在body標籤內設置contentEditable
contentEditable已在html5標準中得到有效的支持。
在IE8下設置表格可寫不支持,其他元素沒有問題。在Firefox運行一切正常。谷歌瀏覽器運行一切正常。
contentEditable屬性值
值 | 描述 |
---|---|
true | 指定元素是可編輯的 |
false | 指定元素是不可編輯的 |
contentEditable使用方法
html中 <p contentEditable="true">;
js 中 document.all("txt").contentEditable =true;
contentEditable應用
前端UI的美化,表單元素通過css樣式不一定能達成設計師的要求,通過開啓 div p span等元素的contentEditable,來實現表單元素的功能(需要js搭配)。
contentEditable舉例
用於在textarea中除ie外不能插入圖片。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
function img(){
var location1 = prompt("請輸入圖片的地址:","http://");
if(location1){
selImg(location1);
}
}
function selImg(s){
if(!s){return false;}
var h=s.substr(s.lastIndexOf(".")+1,3);
if(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){
Edit=document.getElementById("idEdit")
Edit.innerHTML+='<img src='+s+'>'
}
else{
}
}
</script>
<div NAME="EditCtrl" id="idEdit" contentEditable="true" style="width:100%;height:200px;border:1px solid #666666"> <b>hubro</b>
</div>
<input type="button" name="Submit" value="插入圖片" onclick="img()">
contentEditableHTML5中的解釋與規定
contenteditable是一個枚舉類型的屬性,可供選擇的值有 空字符串、 true、false 或 inherit(默認)。
當為空字符串時,效果和true一致。
當一個元素的contenteditable狀態為true(contenteditable屬性為空字符串,或為true,或為inherit且其父元素狀態為true)時,意味着該元素是可編輯的。
contenteditable可直接使用而不需賦值;較新的瀏覽器中,像<p contenteditable> 也可以被正常呈現,表示contenteditable為true。雖然它是不合法的。一個簡單的例子:在瀏覽器地址欄輸入 data:text/html, <html contenteditable> ,即可打開一個簡單的在線編輯器。
[3]
注意:HTML5與HTML4的不同,對於contentEditable HTML5是趨於xhtml,使用的是全小寫contenteditable,而HTML4 使用的是contentEditable
- 參考資料
-
- 1. HTML 全局屬性 .W3Cschool[引用日期2018-01-08]
- 2. HTML 5 全局 contenteditable 屬性 .w3schoole[引用日期2012-10-14]
- 3. One line browser notepad .CoderWall.2013-1[引用日期2014-01-28]
- 詞條統計
-
- 瀏覽次數:次
- 編輯次數:18次歷史版本
- 最近更新: 元元网盟