功能：实现网页内容的即时编辑，增加页面的可用性、交互性。 方法1：直接通过textarea标签实现，请运行下边代码： New Document #info { font-size: 12px; overflow:hidden; background-color: #ffffcc; color: black; padding-right:5px; padding-left:5px; font-family: courier; width:100%; letter-spacing:0; line-height:12px; border-style:none; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码： New Document 点击这里就可以编辑 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]思路： 1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。 2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。 3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。 PS：第二个方法的代码还有点问题，有空再来调试一下。

　　推荐阅读

　　漂亮的widgets，支持换肤和后期开发新皮肤（2007-4-27已更新1.7alpha）

漂亮的widgets，支持换肤和后期开发新皮肤（2007-4-27已更新1.7alpha） 演示效果：http://ucren.com/ucren-examples/widgets.html已知缺陷：1、widgets 不支持多态。2、图片预载功能对 Firefox 的支持不是很好。未>>>详细阅读

本文标题：实现div可编辑的常见方法总结

地址：http://www.17bianji.com/kaifa2/JS/30529.html

 1/2    1