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

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

<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> <div id="sdf" style="width:400px;"> <textarea id="info" onblur="saveInfo()" onmouseout="saveInfo()" onkeyup="setRows()">

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

<title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <div id="gtest"> 点击这里就可以编辑 </div> <script language="JavaScript"> <!-- var obj=document.getElementById("gtest"); var temp_info=obj.innerHTML; obj.onclick=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.onclick=function(){ obj.innerHTML=document.getElementById("test").value; } obj.appendChild(temp_btn); } obj.onmouseover=function(){ obj.style.background="#ff6600"; } obj.onmouseout=function(){ obj.style.background="white"; } //--> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

PS：第二个方法的代码还有点问题，有空再来调试一下。