实现div可编辑的常见方法
作者:jxdawei 来源:jxdawei's blog 时间:2007-11-06 12:02:00
功能:实现网页内容的即时编辑,增加页面的可用性、交互性。
方法1:直接通过textarea标签实现,请运行下边代码:
[提示:你可先修改部分代码,再按运行]
思路:将textarea通过CSS样式设计成让用户感觉不像是textarea的样子,通过onblur、oumouseout等属性进行ajax保存用户数据。
方法二:通过document.createElement的方法向页面增加input来实现。请运行下边代码:
[提示:你可先修改部分代码,再按运行]
思路:
1、当用户鼠标经过可编辑区域时,用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时,也就是onclick事件时,先将原来的内容清掉,将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后,点击“保存”按扭时通过ajax向数据库中写入新的数据。
标签:编辑,div,ajax
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python中判断数字是否为质数的实例讲解
2022-02-17 13:19:05
使用sqlserver存储过程sp_send_dbmail发送邮件配置方法(图文)
2024-01-21 23:55:50
![](https://img.aspxhome.com/file/2023/2/92742_0s.png)
JavaScript条件判断_动力节点Java学院整理
2024-04-22 22:24:50
Python+Requests+PyTest+Excel+Allure 接口自动化测试实战
2023-10-24 20:17:48
![](https://img.aspxhome.com/file/2023/6/114516_0s.png)
利用Python的装饰器解决Bottle框架中用户验证问题
2022-10-07 07:49:15
Python用Pillow(PIL)进行简单的图像操作方法
2022-06-10 10:29:49
![](https://img.aspxhome.com/file/2023/0/80430_0s.jpg)
浅谈数据库优化方案
2024-01-28 05:40:20
详解Python 3D引擎Ursina如何绘制立体图形
2021-11-17 06:04:20
![](https://img.aspxhome.com/file/2023/8/101618_0s.png)
Python3 完全平方数案例
2022-01-03 03:38:37
ThinkPHP使用smarty模板引擎的方法
2023-11-14 11:37:19
perl中的$a和$b介绍
2022-06-15 00:30:07
深入解析golang bufio
2024-04-28 09:13:24
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2022-12-27 03:58:07
浅谈PHP的反射机制
2023-06-13 17:05:35
oracle 常用的几个SQL
2009-12-01 12:36:00
python线程池threadpool实现篇
2022-03-21 19:37:34
Python内存管理方式和垃圾回收算法解析
2022-09-10 17:49:11
如何才能有效对抗MySQL数据库的解密高手
2009-05-22 18:21:00
利用Python库Scapy解析pcap文件的方法
2021-07-26 12:59:01
![](https://img.aspxhome.com/file/2023/2/91962_0s.jpg)
mac下如何将python2.7改为python3
2023-12-07 17:14:43
![](https://img.aspxhome.com/file/2023/2/112822_0s.jpg)