Javascript實(shí)現(xiàn)DIV可編輯的兩大途徑

作者：admin 2010-08-30 10:03:13

你對(duì)使用Javascript實(shí)現(xiàn)div可編輯的常見方法是否了解，這里和大家分享一下，它主要用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的即時(shí)編輯，增加頁(yè)面的可用性、交互性。

本文和大家重點(diǎn)討論一下用Javascript實(shí)現(xiàn)div可編輯的常見方法，這里主要有兩種，希望本文的介紹對(duì)你的學(xué)習(xí)有所幫助。

用Javascript實(shí)現(xiàn)div可編輯的常見方法

功能：實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的即時(shí)編輯，增加頁(yè)面的可用性、交互性。

◆方法一：直接通過(guò)textarea標(biāo)簽實(shí)現(xiàn)，請(qǐng)運(yùn)行下邊代碼：

> 
<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向數(shù)據(jù)庫(kù)中更新當(dāng)前修改內(nèi)容  
}  
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="單擊這里進(jìn)行編輯";  
}  
setDefault();  
setCols();  
script> 
BODY> 
HTML>

[Ctrl+A全選注:如需引入外部Js需刷新才能執(zhí)行]

思路：將textarea通過(guò)CSS樣式設(shè)計(jì)成讓用戶感覺不像是textarea的樣子，通過(guò)onblur、oumouseout等屬性進(jìn)行ajax保存用戶數(shù)據(jù)。#p#

◆方法二：通過(guò)document.createElement的方法向頁(yè)面增加input來(lái)實(shí)現(xiàn)。請(qǐng)運(yùn)行下邊代碼：

<HTML>
<HEAD>
<TITLE>NewDocumentTITLE>
<METANAMEMETANAME="Generator"CONTENT="EditPlus">
<METANAMEMETANAME="Author"CONTENT="">
<METANAMEMETANAME="Keywords"CONTENT="">
<METANAMEMETANAME="Description"CONTENT="">
HEAD>
<BODY>
<dividdivid="gtest">
點(diǎn)擊這里就可以編輯
div>
<SCRIPTLANGUAGESCRIPTLANGUAGE="JavaScript">

[Ctrl+A全選注:如需引入外部Js需刷新才能執(zhí)行]

思路：

1、當(dāng)用戶鼠標(biāo)經(jīng)過(guò)可編輯區(qū)域時(shí)，用背景色等方式提醒用戶該區(qū)域可編輯。

2、當(dāng)用戶鼠標(biāo)點(diǎn)擊該區(qū)域時(shí)，也就是onclick事件時(shí)，先將原來(lái)的內(nèi)容清掉，將臨時(shí)創(chuàng)建出來(lái)一個(gè)輸入框和一個(gè)輸入按扭。

3、用戶修改完后，點(diǎn)擊“保存”按扭時(shí)通過(guò)ajax向數(shù)據(jù)庫(kù)中寫入新的數(shù)據(jù)。

PS：第二個(gè)方法的代碼還有點(diǎn)問(wèn)題，有空再來(lái)調(diào)試一下。

【編輯推薦】

DIV自適應(yīng)高度寫法簡(jiǎn)介
DIV＋CSS設(shè)計(jì)IE6、IE7、Firefox兼容性
DIV布局規(guī)范中CSS類及id命名方式
探究DIV顯示和隱藏用法
將XHTML+CSS頁(yè)面轉(zhuǎn)換為打印機(jī)頁(yè)面技巧

【責(zé)任編輯：程華權(quán) TEL：（010）68476606】

責(zé)任編輯：佚名來(lái)源： jb51.net

javascript div