在HTML5中,我们可以给HTML标签设置contenteditable="true"属性实现用户在浏览器端对标签中的内容进行编辑。
例如:
<div contenteditable="true">可以编辑里面的内容</div>
Contenteditable属性兼容所有浏览器(IE6之前的版本是否兼容未测试),在有些时候我们完全可以用div去替代input或者textarea来实现数据的收集。例如,在使用ajax的时候,在提交表单时我们可以获取div的内容。 细心的人会发现,QQ空间中的发表说说的文本框其实就是一个div,而非textarea文本框。
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标准中得到有效的支持。