contenteditable="true"属性让div+css可以相当于Input

<div contenteditable="true">可以编辑里面的内容</div>   

如果你在BODY里面加上contenteditable="true"，可以发现该属性是多么的神奇。因此我们可以给HTML标签设置contenteditable="true"属性则可以对该标签进行编辑。 contenteditable属性兼容所有浏览器（IE6之前的版本是否兼容未测试） 在有些时候我们完全可以用DIV去替代input或者textarea来达到同样的效果，例如，在使用ajax的时候，在提交表单时我们可以获取DIV的内容。 细心的人会发现，QQ空间中的发表说说的文本框其实就是一个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浏览器下,容器获取焦点时,光标的高度会与容器的高度一样高或者不显示光标. 此时若为容器默认加个占位符,比如<br/>或 可以解决这一问题.

直接使用DIV也可以当文本框用，类似于TextArea文本框，更重要的是DIV的用户体验更完美更帅。Html中的contentEditable属性可以打开某些元素的可编辑状态。也许你没用过contentEditable属性，甚至从未听说过，contentEditable的作用相当神奇。可以让div或整个网页，以及span等等元素设置为可写．我们最常用的输入文本内容便是input与textarea 使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．特别是contentEditable已在html5标准中得到有效的支持。

效果：