功能：實現網頁內容的即時編輯，增加頁面的可用性、互動性。
方法1：直接通過textarea標籤實現，請運行下邊代碼：
<!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 id="sdf" > <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>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
思路：將textarea通過CSS樣式設計成讓使用者感覺不像是textarea的樣子，通過onblur、oumouseout等屬性進行ajax儲存使用者資料。
方法二：通過document.createElement的方法向頁面增加input來實現。請運行下邊代碼：
<!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=""> </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>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
思路：
1、當使用者滑鼠經過可編輯區域時，用背景色等方式提醒使用者該地區可編輯。
2、當使用者滑鼠點擊該地區時，也就是onclick事件時，先將原來的內容清掉，將臨時建立出來一個輸入框和一個輸入按扭。
3、使用者修改完後，點擊“儲存”按扭時通過ajax向資料庫中寫入新的資料。
PS：第二個方法的代碼還有點問題，有空再來調試一下。
