用javascript实现div可编辑的常见方法


功能:实现网页内容的即时编辑,增加页面的可用性、交互性。
方法1:直接通过textarea标签实现,请运行下边代码:


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

思路:将textarea通过CSS样式设计成让用户感觉不像是textarea的样子,通过onblur、oumouseout等属性进行ajax保存用户数据。
方法二:通过document.createElement的方法向页面增加input来实现。请运行下边代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

思路:
1、当用户鼠标经过可编辑区域时,用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时,也就是onclick事件时,先将原来的内容清掉,将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后,点击“保存”按扭时通过ajax向数据库中写入新的数据。

PS:第二个方法的代码还有点问题,有空再来调试一下。



相关阅读:
ASP.NET2.0调用MySql的存储过程
Windows系统Regsvr32命令的用途
深入分析网页CSS隐藏文字和以图换字技术
oracle的启动方式和相关的命令参数一览
SQL学习笔记一SQL基础知识
javascript初学者:全面学习对象概念
ubuntu8.04版本tftp的安装
JavaScript 数组的 uniq 方法
读jQuery之一(对象的组成)
CSS border三角、圆角图形生成技术详解
asp之字符串操作函数
JBuilder2005单元测试之业务类介绍
网页中图片的设置涉及的三个问题
CSS实现的中英文双语导航菜单
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4