实现div可编辑的常见方法

<!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 id="sdf" style="width:400px;">
   <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>

posted on 2007-05-09 21:56 mbskys 阅读(930) 评论(0) 收藏举报