设定contenteditable特性可编写HTML标识的內容(可替代


拷贝编码
编码以下:

<div contenteditable="true">能够编写里边的內容</div>

假如你在BODY里边再加contenteditable="true",能够发现该特性是多么的的奇异。因而大家能够给HTML标识设定contenteditable="true"特性则能够对该标识开展编写。

contenteditable特性适配全部访问器(IE6以前的版本号是不是适配未检测)

在一些情况下大家彻底能够用DIV去取代input或textarea来做到一样的实际效果,比如,在应用ajax的情况下,在递交表单时大家能够获得DIV的內容。

仔细的人会发现,QQ室内空间中的发布说说的文字框实际上便是1个DIV,而非textarea文字框。

Div+CSS怎样仿真模拟textarea文字域高宽比自融入以做到html5规范的contenteditable特性

关键根据为标识加上HTML5中的contenteditable特性做到此实际效果(contenteditable:要求是不是容许客户编写內容),很棒的是,此特性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访问器下,器皿获得聚焦点时,光标的高宽比会与器皿的高宽比1样高或无法显示光标. 此时若为器皿默认设置加个占位符,例如<br/>或&nbsp;能够处理这1难题.

如今煜子给大伙儿详细介绍另外一种可编写可全自动融入高宽比,但又无需加js编码的好方式。让大伙儿开开见识,煜子立即应用DIV还可以当文字框用,相近于TextArea文字框,更关键的是DIV的客户体验更完善更帅。  

Html中的contentEditable特性能够开启一些元素的可编写情况。或许你没用过contentEditable特性,乃至从未听闻过,contentEditable的功效非常奇异。可让div或全部网页页面,和span这些元素设定为可写.大家最常见的键入文字內容就是input与textarea 应用contentEditable特性后,能够在div,table,p,span,body,这些许多元素中键入內容.非常是contentEditable已在html5规范中获得合理的适用。大伙儿来见证1下吧。

设定contentEditable=”true”特性后,是否非常的奇异。哈哈…
 
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编码了。望各位攻城(元勋)们充分发挥极致,盼共享!