div可编辑的常见实现办法

功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
方法1：直接通过textarea标签实现，请运行下边代码： New Document #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;}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 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();思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。
方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码： New Document 点击这里就可以编辑var obj=document.getElementById("gtest");var temp_info=obj.innerHTML;obj.οnclick=function(){obj.innerHTML="";obj.style.background="white";var temp_text = document.createElement("input");temp_text.id="test";temp_text.value=temp_info.replace(/\r\n?/, "\n");obj.appendChild(temp_text);var temp_btn = document.createElement("input");temp_btn.type="button";temp_btn.value="Save";temp_btn.οnclick=function(){obj.innerHTML=document.getElementById("test").value;}obj.appendChild(temp_btn);}obj.οnmοuseοver=function(){obj.style.background="#ff6600";}obj.οnmοuseοut=function(){obj.style.background="white";}//-->思路：
1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。
PS：第二个方法的代码还有点问题，有空再来调试一下。
补充：
[url=http://onlyaa.com/html/jsui/20080522/2158.html]双击单元格变成可编辑的文本框[/url]