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

更新時(shí)間：2007年10月25日 11:24:05 作者：

功能：實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的即時(shí)編輯，增加頁(yè)面的可用性、交互性。
方法1：直接通過(guò)textarea標(biāo)簽實(shí)現(xiàn)，請(qǐng)運(yùn)行下邊代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <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>  </HEAD>  <BODY>       <div   class="amcqyk0"   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向數(shù)據(jù)庫(kù)中更新當(dāng)前修改內(nèi)容         }         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="單擊這里進(jìn)行編輯";         }         setDefault();         setCols();       </script>  </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

思路：將textarea通過(guò)CSS樣式設(shè)計(jì)成讓用戶感覺(jué)不像是textarea的樣子，通過(guò)onblur、oumouseout等屬性進(jìn)行ajax保存用戶數(shù)據(jù)。
方法二：通過(guò)document.createElement的方法向頁(yè)面增加input來(lái)實(shí)現(xiàn)。請(qǐng)運(yùn)行下邊代碼：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(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)試一下。

您可能感興趣的文章: