实现div可编辑的常见方法
功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
方法1：直接通过textarea标签实现，请运行下边代码：
思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。
方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码：
思路：
1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。
PS：第二个方法的代码还有点问题，有空再来调试一下。
方法1：直接通过textarea标签实现，请运行下边代码：
+展开
-HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<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>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<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>
思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。
方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码：
+展开
-HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>
思路：
1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。
PS：第二个方法的代码还有点问题，有空再来调试一下。
加支付宝好友偷能量挖...
