实现div可编辑的常见方法总结- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实现div可编辑的常见方法总结

Javascript: IE与firefox下Dhtml的一些区别小结; jQuery Selectors(选择器)的使用(一、基本篇); jQuery Selectors(选择器)的使用(二、层次篇); jQuery 跨域访问问题解决方法; jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名; javascript 面向对象全新理练之数据的封装; javascript 面向对象全新理练之继承与多态; javascript 面向对象全新理练之原型继承; JavaScript 生成随机数并自动大小排序; JavaScript利用split函数按规定截取字符串(获取邮箱用户名); JavaScript 双级下拉菜单实现代码; JavaScript split()使用方法与示例; 33种Javascript 表格排序控件收集; js 屏蔽鼠标右键脚本附破解方法; javascript json 新手入门文档; jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇); javascript KeyDown、KeyPress和KeyUp事件的区别与联系; javascript 汉字转拼音实现代码; javascript 跳转代码集合; JavaScript 申明函数的三种方法每个函数就是一个对象（一）

No. « ‹ 244 245 246 247 › »

技术文章搜索

关键字

Javascript 中的实现div可编辑的常见方法总结

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 243 ::

收藏到网摘: n/a

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

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> #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; } </style> </HEAD> <BODY> <div id="sdf" style="width:400px;"> <textarea id="info" onblur="saveInfo()" onmouseout="saveInfo()" onkeyup="setRows()"></textarea> </div> <script language="JavaScript"> function saveInfo() { var text = document.getElementById("info").value; //再用ajax向数据库中更新当前修改内容 } function setCols() { var textarea = document.getElementById("info"); textarea.setAttribute("cols", Math.floor(textarea.clientWidth / 7)); setRows(); } function setRows() { var textarea = document.getElementById("info"); var cols = textarea.cols; var str = textarea.value; str = str.replace(/\r\n?/, "\n"); var lines = 2; var chars = 0; for (i = 0; i < str.length; i++) { var c = str.charAt(i); chars++; if (c == "\n" || chars == cols) { lines ++; chars = 0; } } textarea.setAttribute("rows", lines); textarea.style.height = lines*12 + "px"; } function setDefault(){ var textarea=document.getElementById("info"); textarea.value="单击这里进行编辑"; } setDefault(); setCols(); </script> </BODY>
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

思路：
1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。
PS：第二个方法的代码还有点问题，有空再来调试一下。

Javascript 中的 实现div可编辑的常见方法总结

评论 (0) All

Javascript 中的实现div可编辑的常见方法总结