繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实现div可编辑的常见方法总结
- Javascript
- 用js实现终止浏览器对页面HTML的继续解析即停止解析 兼容firefox
- Auntion-TableSort国人写的一个javascript表格排序的东西
- javascript实现二分查找法实现代码
- 利用ASP发送和接收XML数据的处理方法与代码
- 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
- javascript之文本框输入四个数字自动加空格的脚本
- 比较简单实用的使用正则三种版本的js去空格处理方法
- 比较简洁的JavaScript 实时显示时间的脚本 修正版
- JavaScript检查表单是否为空的函数
- window.open被浏览器拦截后的自定义提示效果代码
- javascript跟随鼠标的文字带滚动效果
- 让插入到 innerHTML 中的 script 跑起来的代码
- Flash+XML滚动新闻代码 无图片 附源码下载
- javascript(js) join函数使用方法介绍
- 表格头固定而列可滚动的效果
- document.designMode的功能与使用方法介绍
- 精解window.setTimeout()&window.setInterval()使用方式与参数传递问题！
- 用javascript实现的电信铁通（网通）自动跳转源代码
- 用js查找法实现当前栏目的高亮显示的代码
- javascript之鼠标拖动位置互换效果代码
Javascript 中的 实现div可编辑的常见方法总结
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 223 ::
收藏到网摘: n/a
功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
方法1：直接通过textarea标签实现，请运行下边代码：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。
方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
思路：
1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。
PS：第二个方法的代码还有点问题，有空再来调试一下。
评论 (0) All
