栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

用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:第二个方法的代码还有点问题,有空再来调试一下。
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/119665.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号