前言

在很多时候，我们想让一个元素可编辑，怎么做呢？除了用一个input、textarea标签？这个方法虽然可行，但我有一个更加简单的方法可以让元素可编辑。在html中2个全局属性分别是contentEditable和contenteditable，可以让元素可编辑。可能有人会问了，这2个属性有什么区别呢？我直接告诉你功能上没有区别。是不是开始觉得w3c吃饱了撑着没事做了。当然不是了，要注意下面这点了，关于html中为什么会出现这2个属性？contentEditable属性是html4中的一种写法，后来html5的出现增加了很多新的属性，其中就有一个全局属性contenteditable，对于contenteditable是趋于xhtml，使用的是全小写contenteditable，而contentEditable就不多说了，是趋于html4的一种写法。废话不多说，下面介绍一下它的写法吧。

contenteditable属性，它有3个值，分别是true、false和inherit。接下来就简单介绍下这个3个值的意思。

Demo

1、html5写法

2、子元素继承父级元素的状态：inherit

3、如果contenteditable为空字符串是和true效果一样

4、 html4写法，不建议使用

5、contenteditable可直接使用而不需赋值，较新的浏览器中不会报错，但不建这么写

效果图：

参考文章：