複製鏈接
請複製以下鏈接發送給好友
https://baike.baidu.hk/item/contentEditable/9151016
複製
複製成功

contentEditable

鎖定
contentEditablehtml中的一個屬性。設置html的contentEditable=true時，即可開啓該元素的編輯模式。
外文名
contentEditable
使用方法
html、js
應    用
前端UI的美化
所需瀏覽器
Firefox、Chrome、Safari、IE等

目錄

  1. 1 簡介
  2. 2 屬性值
  3. ▪ 使用方法
  1. ▪ 應用
  2. ▪ 舉例
  3. 3 HTML5中的解釋與規定

contentEditable簡介

HTML中的contentEditable的屬性可以打開某些元素的可編輯狀態．也許你沒用過contentEditable屬性．甚至從未聽説過．contentEditable的作用相當神奇．可以讓div或整個網頁，以及span等等元素設置為可寫。我們最常用的輸入文本內容便是input與textarea，使用contentEditable屬性後，可以在div,table,p,span,body,等等很多元素中輸入內容．
如果想要整個網頁可編輯，請在body標籤內設置contentEditable
contentEditable已在html5標準中得到有效的支持。
在IE8下設置表格可寫不支持，其他元素沒有問題。在Firefox運行一切正常。谷歌瀏覽器運行一切正常。

contentEditable屬性值

在HTML中，contentEditable屬性具有以下的屬性值： [1] 
值
描述
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）時，意味着該元素是可編輯的。
否則，該元素不可編輯。 [2] 
contenteditable可直接使用而不需賦值；較新的瀏覽器中，像<p contenteditable> 也可以被正常呈現，表示contenteditable為true。雖然它是不合法的。一個簡單的例子：在瀏覽器地址欄輸入 data:text/html, <html contenteditable> ，即可打開一個簡單的在線編輯器。 [3] 
注意：HTML5與HTML4的不同，對於contentEditable HTML5是趨於xhtml，使用的是全小寫contenteditable,而HTML4 使用的是contentEditable
參考資料