^{<td id="jmgbz"></td>}

設(shè)置contenteditable屬性可編輯HTML標(biāo)簽的內(nèi)容(可代替textarea)

2020-03-24 16:35:15

字體：大中小

供稿：網(wǎng)友

HTML 設(shè)置contenteditable屬性可編輯HTML標(biāo)簽的內(nèi)容(可代替textarea)

復(fù)制代碼代碼如下:
div contenteditable="true" 可以編輯里面的內(nèi)容 /div

如果你在BODY里面加上contenteditable= true ，可以發(fā)現(xiàn)該屬性是多么的神奇。因此我們可以給HTML標(biāo)簽設(shè)置contenteditable= true 屬性則可以對(duì)該標(biāo)簽進(jìn)行編輯。contenteditable屬性兼容所有瀏覽器（IE6之前的版本是否兼容未測(cè)試）在有些時(shí)候我們完全可以用DIV去替代input或者textarea來(lái)達(dá)到同樣的效果，例如，在使用ajax的時(shí)候，在提交表單時(shí)我們可以獲取DIV的內(nèi)容。細(xì)心的人會(huì)發(fā)現(xiàn)，QQ空間中的發(fā)表說(shuō)說(shuō)的文本框其實(shí)就是一個(gè)DIV，而非textarea文本框。Div+CSS如何模擬textarea文本域高度自適應(yīng)以達(dá)到html5標(biāo)準(zhǔn)的contenteditable屬性主要通過(guò)為標(biāo)簽添加HTML5中的contenteditable屬性達(dá)到此效果（contenteditable：規(guī)定是否允許用戶編輯內(nèi)容），很棒的是，此屬性IE也會(huì)支持，所以不用再為兼容問(wèn)題太去糾結(jié)了。
DEMO：
復(fù)制代碼代碼如下:
style type="text/css"
.demoEdit{border:1px solid #dddddd;width:450px;min- height:20px;_height:20px;outline:0px;padding:2px;} // outline:0px;樣式解決容器獲取焦點(diǎn)時(shí),在FF瀏覽器下容器會(huì)顯示虛線框的效果.
.demoEdit p{margin:0px;padding:0px;}
/style
div contenteditable="true" /div
div contenteditable="true" /div
附:
在FF瀏覽器下,容器獲取焦點(diǎn)時(shí),光標(biāo)的高度會(huì)與容器的高度一樣高或者不顯示光標(biāo). 此時(shí)若為容器默認(rèn)加個(gè)占位符,比如 br/ 或 nbsp;可以解決這一問(wèn)題.

現(xiàn)在煜子給大家介紹另一種可編輯可自動(dòng)適應(yīng)高度,但又不用加js代碼的好方法。讓大家開(kāi)開(kāi)眼界，煜子直接使用DIV也可以當(dāng)文本框用，類似于TextArea文本框，更重要的是DIV的用戶體驗(yàn)更完美更帥。 Html中的contentEditable屬性可以打開(kāi)某些元素的可編輯狀態(tài)。也許你沒(méi)用過(guò)contentEditable屬性，甚至從未聽(tīng)說(shuō)過(guò)，contentEditable的作用相當(dāng)神奇。可以讓div或整個(gè)網(wǎng)頁(yè)，以及span等等元素設(shè)置為可寫(xiě)．我們最常用的輸入文本內(nèi)容便是input與textarea 使用contentEditable屬性后，可以在div,table,p,span,body,等等很多元素中輸入內(nèi)容．特別是contentEditable已在html5標(biāo)準(zhǔn)中得到有效的支持。大家來(lái)見(jiàn)證一下吧。設(shè)置contentEditable= true 屬性后，是不是相當(dāng)?shù)纳衿?。哈?

DEMO頁(yè)面： http://demo.phpstudy.net/js/2014/ContentEditable/我們來(lái)個(gè)特效吧，通過(guò)開(kāi)啟div元素編輯，是否能插入圖片，這是需要用到j(luò)s了。
復(fù)制代碼代碼如下:
script
function img(){
var location1 = prompt("請(qǐng)輸入圖片的地址：","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 b Yuzi.me /b /div
input type="button" name="Submit" value="插入圖片"
妙哉，如果想使用更多效果，需要自己寫(xiě)js代碼了。望各位攻城（功臣）們發(fā)揮極致，盼分享！html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html5實(shí)現(xiàn)的便簽特效(實(shí)戰(zhàn)分享)

下一篇：html頁(yè)面中常用的一些小方法整理