Javascript實(shí)現(xiàn)DIV可編輯的兩大途徑
本文和大家重點(diǎn)討論一下用Javascript實(shí)現(xiàn)div可編輯的常見方法，這里主要有兩種，希望本文的介紹對(duì)你的學(xué)習(xí)有所幫助。
用Javascript實(shí)現(xiàn)div可編輯的常見方法
功能：實(shí)現(xiàn)網(wǎng)頁內(nèi)容的即時(shí)編輯，增加頁面的可用性、交互性。
◆方法一：直接通過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ù)庫中更新當(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通過CSS樣式設(shè)計(jì)成讓用戶感覺不像是textarea的樣子，通過onblur、oumouseout等屬性進(jìn)行ajax保存用戶數(shù)據(jù)。#p#
◆方法二：通過document.createElement的方法向頁面增加input來實(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)過可編輯區(qū)域時(shí)，用背景色等方式提醒用戶該區(qū)域可編輯。
2、當(dāng)用戶鼠標(biāo)點(diǎn)擊該區(qū)域時(shí)，也就是onclick事件時(shí)，先將原來的內(nèi)容清掉，將臨時(shí)創(chuàng)建出來一個(gè)輸入框和一個(gè)輸入按扭。
3、用戶修改完后，點(diǎn)擊“保存”按扭時(shí)通過ajax向數(shù)據(jù)庫中寫入新的數(shù)據(jù)。
PS：第二個(gè)方法的代碼還有點(diǎn)問題，有空再來調(diào)試一下。
【編輯推薦】
- DIV自適應(yīng)高度寫法簡(jiǎn)介
- DIV＋CSS設(shè)計(jì)IE6、IE7、Firefox兼容性
- DIV布局規(guī)范中CSS類及id命名方式
- 探究DIV顯示和隱藏用法
- 將XHTML+CSS頁面轉(zhuǎn)換為打印機(jī)頁面技巧
【責(zé)任編輯：程華權(quán) TEL：（010）68476606】
