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

发布于 2016-12-04 06:28:45 | 62 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
方法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> 
      <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来实现。请运行下边代码：

<body> 
<div> 
    点击这里就可以编辑 
</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);

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

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

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

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他