主要通过为标签添加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/>或 可以解决这一问题.