让用户编辑网站上的文本比预期的要容易。HTML为此提供了一个属性：contenteditable。

contenteditable属性在2014年HTML5发布时首次引入。它指定网站访问者是否可以从浏览器中更改其管辖的内容。

支持contenteditable属性

大多数现代桌面浏览器都支持该属性。这些措施包括：

• Chrome 4.0及以上版本
• Internet Explorer 6及以上版本
• Firefox3.5及以上版本
• Safari 3.1及以上版本
• 歌剧10.1及以上
• 微软边缘

大多数移动浏览器也是如此。

如何使用contenteditable

只需将该属性添加到要使其可编辑的HTML元素中。它有三个可能的值：true、false和inherit。Inherit是默认值，这意味着元素接受其父元素的值。同样，新可编辑内容的任何子元素也将是可编辑的，除非将其值更改为false。例如，要使DIV元素可编辑，请使用：

使用contenteditable创建可编辑的待办事项列表

可编辑内容与本地存储配对时最有意义，因此内容在会话和站点访问之间保持不变。

1. 在HTML编辑器中打开页面。创建一个项目符号无序列表，名为myTasks:Some Tasks另一个task

将contenteditable属性添加到

• 要素：

You now have a to-do list that is editable — but if you close your browser or leave the page, your list will disappear. The solution: Add a simple script to save the tasks to localStorage.

Add a link to jQuery in the

This example uses the Google CDN, but you can host it yourself or use another CDN if you prefer.

At the bottom of your page, just above the  tag, add your script:

在document.ready函数中，添加脚本以将任务加载到localStorage中，并获取以前保存在那里的任何任务：

1. localStorage.setItem（'myTasksData'，this.innerHTML）；//保存到本地存储}）；if（localStorage.getItem（'myTasksData'））{//localStorage$（“#myTasks”）.html（localStorage.getItem（'myTasksData'））中是否有内容；//将内容放在第}页）；

整个页面的HTML如下所示：

输入列表中的项目。浏览器将为您存储它，这样当您重新打开浏览器时，它仍将在这里。

• 一些任务
• 另一项任务