Javascript实现DIV可编辑的两大途径(1)


本文和大家重点讨论一下用Javascript实现div可编辑的常见方法,这里主要有两种,希望本文的介绍对你的学习有所帮助。


用Javascript实现div可编辑的常见方法


功能:实现网页内容的即时编辑,增加页面的可用性、交互性。


◆方法一:直接通过textarea标签实现,请运行下边代码:

  1. > 
  2. <HTML> 
  3. <HEAD> 
  4. <TITLE>NewDocumentTITLE> 
  5. <METANAMEMETANAME="Generator"CONTENT="EditPlus"> 
  6. <METANAMEMETANAME="Author"CONTENT=""> 
  7. <METANAMEMETANAME="Keywords"CONTENT=""> 
  8. <METANAMEMETANAME="Description"CONTENT=""> 
  9. <styletypestyletype="text/css"> 
  10. #info{  
  11. font-size:12px;  
  12. overflow:hidden;  
  13. background-color:#ffffcc;  
  14. color:black;  
  15. padding-right:5px;  
  16. padding-left:5px;  
  17. font-family:courier;  
  18. width:100%;  
  19. letter-spacing:0;  
  20. line-height:12px;  
  21. border-style:none;  
  22. }  
  23. style> 
  24. HEAD> 
  25.  
  26. <BODY> 
  27.  
  28. <dividdivid="sdf"style="width:400px;"> 
  29. <textareaidtextareaid="info"onblur="saveInfo()"onmouseout="saveInfo()"
  30. onkeyup="setRows()">textarea> 
  31. div> 
  32. <scriptlanguagescriptlanguage="JavaScript"> 
  33. functionsaveInfo(){  
  34. vartext=document.getElementById("info").value;  
  35. //再用ajax向数据库中更新当前修改内容  
  36. }  
  37. functionsetCols(){  
  38. vartextarea=document.getElementById("info");  
  39. textarea.setAttribute("cols",Math.floor(textarea.clientWidth/7));  
  40. setRows();  
  41. }  
  42. functionsetRows(){  
  43. vartextarea=document.getElementById("info");  
  44. varcols=textarea.cols;  
  45. varstr=textarea.value;  
  46. strstr=str.replace(/\r\n?/,"\n");  
  47. varlines=2;  
  48. varchars=0;  
  49. for(i=0;i<str.length;i++){  
  50. varc=str.charAt(i);  
  51. chars++;  
  52. if(c=="\n"||chars==cols){  
  53. lines++;  
  54. chars=0;  
  55. }  
  56. }  
  57. textarea.setAttribute("rows",lines);  
  58. textarea.style.height=lines*12+"px";  
  59. }  
  60. functionsetDefault(){  
  61. vartextarea=document.getElementById("info");  
  62. textarea.value="单击这里进行编辑";  
  63. }  
  64. setDefault();  
  65. setCols();  
  66. script> 
  67. BODY> 
  68. HTML> 
  69.  

[Ctrl+A全选注:如需引入外部Js需刷新才能执行]


思路:将textarea通过CSS样式设计成让用户感觉不像是textarea的样子,通过onblur、oumouseout等属性进行ajax保存用户数据。


标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2