contentEditable 让HTML随时随地可编辑

前言

在很多时候，我们想让一个元素可编辑，怎么做呢？除了用一个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个值的意思。

contenteditable='true'	指定元素可编辑
contenteditable='false'	指定元素不可编辑
contenteditable='inherit'	指定元素继承父级元素状态

Demo

<style>
	.box{
		width: 200px;
		height: 200px;
		border: 1px solid red;
	}
	.box2{
		width: 100px;
		height: 100px;
		background-color: greenyellow;
	}
</style>

1、html5写法

<!-- html5写法 -->
<div class='box' contenteditable='true'>

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

<div class='box' contenteditable='true'>
	<!-- 继承父级元素的状态 -->
	<p class='box2' contenteditable='inherit'>继承</p>
</div>

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

<!-- 当为空字符串是和true效果一样 -->
<p class='box' contenteditable=''>只写一个字符串，和true的效果一样</p>

4、 html4写法，不建议使用

<!-- html4写法，不建议使用 -->
<p class='box' contentEditable='true'>html4写法</p>

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

<!-- contenteditable可直接使用而不需赋值；较新的浏览器中不会报错，但不建议这么写 -->
<div class='box' contenteditable>直接使用而不需赋值</div>	

效果图：

效果动态图