本文和大家重點討論一下用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保存用戶數據。