《HTML5 开发实例大全》——1.29 编辑修改网页中的文字

本节书摘来自异步社区《html5 开发实例大全》一书中的第1章，第1.29节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

https://yqfile.alicdn.com/9676c986b3f446dafbe27c46ae0647741ced8299.png" >

实例说明

在html 5 中，使用属性“contenteditable”可以直接编辑显示在页面中的文字，该属性的取值为布尔型“true”或“false”。如果在元素中将该属性的值设置为“true”，那么就可以对该元素显示的文本内容直接进行编辑了。

在本实例中，分别创建了两个< article >内容元素。第一个元素将“contenteditable”属性设置为“true”，用于直接内容的编辑；第二个< article >元素保存编辑后的内容。当用户编辑完成后，单击“保存”按钮，则将编辑后的内容显示在第二个< article >元素中。

具体实现

使用dreamweaver创建一个名为“029.html”的文件，具体代码如下所示：

在上述javascript代码中，自定义了一个在单击“保存”按钮时调用的函数btn_click()。在该函数中，为了获取编辑后的内容，先将修改完成的内容保存至变量“strart”中，然后通过元素id号获取用于显示结果的< article >元素，并将该元素显示的内容设置为变量“strart”的值。执行后的初始效果如图1-49所示，修改这段文字，然后单击“保存”按钮后发现成功修改了这段文字，如图1-50所示。

https://yqfile.alicdn.com/f4d9f2080855685014e3e3255c3ed7db07e6f80b.png" >

注意

在html 5中，大部分显示文本内容的元素都支持“contenteditable”属性，这给页面中用户的交互体验带来了极大的方便。到作者编写本书时为止，暂无相关的api对编辑后的内容进行直接保存；如果需要保存，只能借助于ajax或jquery中的异步操作来更新对应的后台数据。