主頁 > 知識庫 > 設置contenteditable屬性可編輯HTML標簽的內容(可代替textarea)

設置contenteditable屬性可編輯HTML標簽的內容(可代替textarea)

熱門標簽:經綸電銷機器人 浦東新區(qū)百度地圖標注圖片 騰訊植物園地圖標注 電話機器人宣傳片 外呼智能系統(tǒng)報價 個貸電銷機器人 巫山縣地圖標注app 華為收費站地圖標注 鄒城智能外呼系統(tǒng)


復制代碼
代碼如下:

<div contenteditable="true">可以編輯里面的內容</div>

如果你在BODY里面加上contenteditable="true",可以發(fā)現(xiàn)該屬性是多么的神奇。因此我們可以給HTML標簽設置contenteditable="true"屬性則可以對該標簽進行編輯。

contenteditable屬性兼容所有瀏覽器(IE6之前的版本是否兼容未測試)

在有些時候我們完全可以用DIV去替代input或者textarea來達到同樣的效果,例如,在使用ajax的時候,在提交表單時我們可以獲取DIV的內容。

細心的人會發(fā)現(xiàn),QQ空間中的發(fā)表說說的文本框其實就是一個DIV,而非textarea文本框。

Div+CSS如何模擬textarea文本域高度自適應以達到html5標準的contenteditable屬性

主要通過為標簽添加HTML5中的contenteditable屬性達到此效果(contenteditable:規(guī)定是否允許用戶編輯內容),很棒的是,此屬性IE也會支持,所以不用再為兼容問題太去糾結了。
  DEMO:


復制代碼
代碼如下:

  <style type="text/css">
  .demoEdit{border:1px solid #dddddd;width:450px;min- height:20px;_height:20px;outline:0px;padding:2px;} // outline:0px;樣式解決容器獲取焦點時,在FF瀏覽器下容器會顯示虛線框的效果.
  .demoEdit p{margin:0px;padding:0px;}
  </style>
  <div contenteditable="true" style="border:1px solid #dddddd;width:360px;min-height:20px;_height:20px;outline:0px;"></div>
  <div contenteditable="true" class="demoEdit"></div>

  附:
  在FF瀏覽器下,容器獲取焦點時,光標的高度會與容器的高度一樣高或者不顯示光標. 此時若為容器默認加個占位符,比如<br/>或&nbsp;可以解決這一問題.

現(xiàn)在煜子給大家介紹另一種可編輯可自動適應高度,但又不用加js代碼的好方法。讓大家開開眼界,煜子直接使用DIV也可以當文本框用,類似于TextArea文本框,更重要的是DIV的用戶體驗更完美更帥。  

Html中的contentEditable屬性可以打開某些元素的可編輯狀態(tài)。也許你沒用過contentEditable屬性,甚至從未聽說過,contentEditable的作用相當神奇??梢宰宒iv或整個網頁,以及span等等元素設置為可寫.我們最常用的輸入文本內容便是input與textarea 使用contentEditable屬性后,可以在div,table,p,span,body,等等很多元素中輸入內容.特別是contentEditable已在html5標準中得到有效的支持。大家來見證一下吧。

設置contentEditable=”true”屬性后,是不是相當?shù)纳衿?。哈?hellip;
 
DEMO頁面: http://demo.jb51.net/js/2014/ContentEditable/

我們來個特效吧,通過開啟div元素編輯,是否能插入圖片,這是需要用到js了。


復制代碼
代碼如下:

<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>Yuzi.me</b></div>
<input type="button" name="Submit" value="插入圖片" onclick="img()">

妙哉,如果想使用更多效果,需要自己寫js代碼了。望各位攻城(功臣)們發(fā)揮極致,盼分享!

標簽:滁州 那曲 日喀則 三沙 唐山 楊凌 南平 廣西

巨人網絡通訊聲明:本文標題《設置contenteditable屬性可編輯HTML標簽的內容(可代替textarea)》,本文關鍵詞  設置,contenteditable,屬性,;如發(fā)現(xiàn)本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《設置contenteditable屬性可編輯HTML標簽的內容(可代替textarea)》相關的同類信息!
  • 本頁收集關于設置contenteditable屬性可編輯HTML標簽的內容(可代替textarea)的相關信息資訊供網民參考!
  • 推薦文章