contentEditablehtml中的一個屬性。設定html的contentEditable="true"時，即可開啟該元素的編輯模式。
基本介紹
- 外文名：contentEditable
- 使用方法：html、js
- 套用：前端UI的美化
- 所需瀏覽器：Firefox、Chrome、Safari、IE等
簡介,屬性值,使用方法,套用,舉例：,HTML5中的解釋與規定,
簡介
HTML中的contentEditable的屬性可以打開某些元素的可編輯狀態．也許你沒用過contentEditable屬性．甚至從未聽說過．contentEditable的作用相當神奇．可以讓div或整個網頁，以及span等等元素設定為可寫。我們最常用的輸入文本內容便是input與textarea，使用contentEditable屬性後，可以在div,table,p,span,body,等等很多元素中輸入內容．
如果想要整個網頁可編輯，請在body標籤內設定contentEditable
contentEditable已在html5標準中得到有效的支持。
在IE8下設定表格可寫不支持，其他元素沒有問題。在Firefox運行一切正常。谷歌瀏覽器運行一切正常。
屬性值
在HTML中，contentEditable屬性具有以下的屬性值：
| 值 | 描述 |
|---|---|
true | 指定元素是可編輯的 |
false | 指定元素是不可編輯的 |
使用方法
html中 <p contentEditable="true">;
js 中 document.all("txt").contentEditable =true;
套用
前端UI的美化，表單元素通過css樣式不一定能達成設計師的要求，通過開啟 div p span等元素的contentEditable，來實現表單元素的功能（需要js搭配）。
舉例：
用於在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()">
HTML5中的解釋與規定
contenteditable是一個枚舉類型的屬性，可供選擇的值有 空字元串、 true、false 或 inherit（默認）。
當為空字元串時，效果和true一致。
當一個元素的contenteditable狀態為true（contenteditable屬性為空字元串，或為true，或為inherit且其父元素狀態為true）時，意味著該元素是可編輯的。
否則，該元素不可編輯。
contenteditable可直接使用而不需賦值；較新的瀏覽器中，像<p contenteditable> 也可以被正常呈現，表示contenteditable為ture。雖然它是不合法的。一個簡單的例子：在瀏覽器地址欄輸入 data:text/html, <html contenteditable> ，即可打開一個簡單的線上編輯器。
注意：HTML5與HTML4的不同，對於contentEditable HTML5是趨於xhtml，使用的是全小寫contenteditable,而HTML4 使用的是contentEditable
