Contenteditable=“true“属性让HTML标签中的内容（如Div）可编辑（相当于Input、Textarea）

HTML5内容可编辑

最新推荐文章于 2025-01-21 16:54:40 发布

qhdzj87

最新推荐文章于 2025-01-21 16:54:40 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML与CSS 文章标签： html 前端网页 Contenteditable

原文链接：https://blog.csdn.net/qq_36609119/article/details/78654905

HTML与CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用HTML5的contenteditable属性将div等元素变为可编辑区域，提供了一个简单的示例，并讨论了该属性在不同浏览器中的表现。

在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标准中得到有效的支持。