html5 内容可编辑

版本：HTML5

contenteditable 属性规定元素内容是否可编辑。它允许用户去改变元素中包含的任何文字，包括它的子对象。ontenteditable 属性是 HTML5 中的新属性。

新的浏览器拥有一个可以应用于元素中的漂亮的新属性，这就是contenteditable。就像名字所表示的，它允许用户去改变元素中包含的任何文字，包括它的子对象。这个属性的用途很多，包括简单的to-do list应用。

语法

<element contenteditable="true|false">

属性值

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签的属性及方法。
所有主流浏览器都支持 contenteditable 属性。

实例

<ul contenteditable="true"> 
	<li> Break mechanical cab driver. </li> 
	<li> Drive to abandoned factory  
	<li> Watch video of self </li> 
</ul> 

效果如下

• Break mechanical cab driver.
• Drive to abandoned factory
• Watch video of self

<fieldset>
    <legend>编辑区</legend>
    <p style="min-height:100px;" contenteditable="true">这里的内容可以被编辑</p>
</fieldset>

效果如下

• contenteditable属性可以让元素的内容变成可以编辑的，也就是说，内容可以删除或者添加，并且可以将网页中其他元素的内容拖动到该元素中。
• contenteditable的值可以是true、false或者空字符串，当值是空字符串时，与值true功效相同，表示元素的内容可以编辑。

HTML代码：

<ul contenteditable="true">
    <li>这里是第一行文字</li>
    <li>这里是第二行文字</li>
    <li>这里是第三行文字</li>
</ul>

效果如下

• 这里是第一行文字
• 这里是第二行文字
• 这里是第三行文字