实现div可编辑的常见方法总结_javascript技巧

来源：五八零教育网

功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
方法1：直接通过textarea标签实现，请运行下边代码：

<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>

<textarea id="info" onblur="saveInfo()" onmouseout="saveInfo()" onkeyup="setRows()"></textarea> 
 
  
 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来实现。请运行下边代码：

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
思路：
1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。
PS：第二个方法的代码还有点问题，有空再来调试一下。

显示全文

全部频道

实现div可编辑的常见方法总结_javascript技巧