实现div可编辑的常见方法

作者：jxdawei 来源：jxdawei's blog 时间：2007-11-06 12:02:00　

功能：实现网页内容的即时编辑，增加页面的可用性、交互性。

方法1：直接通过textarea标签实现，请运行下边代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> 实现div可编辑的常见方法 - asp之家</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="单击这里进行编辑：asp之家"; } setDefault(); setCols(); </script> </BODY></HTML>[提示：你可先修改部分代码，再按运行]

思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。

方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码：

思路：

1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。

2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。

3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。

标签：编辑,div,ajax

投稿

实现div可编辑的常见方法

猜你喜欢

ORACLE数据库空间整理心得

Debugging JavaScript：throw与console

SQL语句中的一些特殊参数如何用变量来代替

15个用户体验设计剖析

用XsltArgumentList实现xsl的参数调用

mysql 存储过程使用小结

ASP动态页服务器端的处理原理

VB应用程序访问SQL Server的常用方法

Dreamweaver MX 2004 之 Flash Element

细化解析：MySQL 服务器究竟有多稳定？

如何编制一个产生随机密码的函数？

Javascript fso操作文件

SQL Server数据库管理常用SQL和T-SQL语句

Javascript:keyCode键盘键码值表

如何在Access 2007数据库中添加附件

企业网站该怎么做？

JavaScript 日期下拉选择器

用ASP实现IE地址栏参数的判断

ASP实例：处理多关键词查询实例代码

Laravel操作redis和缓存操作详解

实现div可编辑的常见方法

猜你喜欢

ORACLE数据库空间整理心得

Debugging JavaScript：throw与console

SQL语句中的一些特殊参数如何用变量来代替

15个用户体验设计剖析

用XsltArgumentList实现xsl的参数调用

mysql 存储过程 使用小结

ASP动态页服务器端的处理原理

VB应用程序访问SQL Server的常用方法

Dreamweaver MX 2004 之 Flash Element

细化解析：MySQL 服务器究竟有多稳定？

如何编制一个产生随机密码的函数？

Javascript fso操作文件

SQL Server数据库管理常用SQL和T-SQL语句

Javascript:keyCode键盘键码值表

如何在Access 2007数据库中添加附件

企业网站该怎么做？

JavaScript 日期下拉选择器

用ASP实现IE地址栏参数的判断

ASP实例：处理多关键词查询实例代码

Laravel操作redis和缓存操作详解

mysql 存储过程使用小结