Javascript實現DIV可編輯的兩大途徑
作者：admin
你對使用Javascript實現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】
責任編輯：佚名
來源：
jb51.net
