Javascript实现DIV可编辑的两大途径-div 可编辑

本文和大家重点讨论一下用Javascript实现div可编辑的常见方法，这里主要有两种，希望本文的介绍对你的学习有所帮助。

用Javascript实现div可编辑的常见方法

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

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

> 
<HTML> 
<HEAD> 
<TITLE>NewDocumentTITLE> 
<METANAMEMETANAME="Generator"CONTENT="EditPlus"> 
<METANAMEMETANAME="Author"CONTENT=""> 
<METANAMEMETANAME="Keywords"CONTENT=""> 
<METANAMEMETANAME="Description"CONTENT=""> 
<styletypestyletype="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> 
 
<dividdivid="sdf"style="width:400px;"> 
<textareaidtextareaid="info"onblur="saveInfo()"onmouseout="saveInfo()"
onkeyup="setRows()">textarea> 
div> 
<scriptlanguagescriptlanguage="JavaScript"> 
functionsaveInfo(){  
vartext=document.getElementById("info").value;  
//再用ajax向数据库中更新当前修改内容  
}  
functionsetCols(){  
vartextarea=document.getElementById("info");  
textarea.setAttribute("cols",Math.floor(textarea.clientWidth/7));  
setRows();  
}  
functionsetRows(){  
vartextarea=document.getElementById("info");  
varcols=textarea.cols;  
varstr=textarea.value;  
strstr=str.replace(/\r\n?/,"\n");  
varlines=2;  
varchars=0;  
for(i=0;i<str.length;i++){  
varc=str.charAt(i);  
chars++;  
if(c=="\n"||chars==cols){  
lines++;  
chars=0;  
}  
}  
textarea.setAttribute("rows",lines);  
textarea.style.height=lines*12+"px";  
}  
functionsetDefault(){  
vartextarea=document.getElementById("info");  
textarea.value="单击这里进行编辑";  
}  
setDefault();  
setCols();  
script> 
BODY> 
HTML>

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

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

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

<HTML>
<HEAD>
<TITLE>NewDocumentTITLE>
<METANAMEMETANAME="Generator"CONTENT="EditPlus">
<METANAMEMETANAME="Author"CONTENT="">
<METANAMEMETANAME="Keywords"CONTENT="">
<METANAMEMETANAME="Description"CONTENT="">
HEAD>
<BODY>
<dividdivid="gtest">
点击这里就可以编辑
div>
<SCRIPTLANGUAGESCRIPTLANGUAGE="JavaScript">

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

思路：

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

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

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

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

【编辑推荐】

【责任编辑：程华权 TEL：（010）68476606】