×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 3967|回复: 8

让用户直接编辑网页内容的效果

[复制链接]
发表于 2007-5-3 10:59:05 | 显示全部楼层 |阅读模式
功能:实现网页内容的即时编辑,增加页面的可用性、交互性。
方法1:直接通过textarea标签实现,请运行下边代码:

[runcode]<!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>[/runcode]


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

方法二:通过document.createElement的方法向页面增加input来实现。请运行下边代码:

[runcode]<!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="">
</HEAD>

<BODY>
<div id="gtest">
        点击这里就可以编辑
</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);

        var temp_btn = document.createElement("input");
        temp_btn.type="button";
        temp_btn.value="Save";
        temp_btn.onclick=function(){
                obj.innerHTML=document.getElementById("test").value;
        }
        obj.appendChild(temp_btn);
}
obj.onmouseover=function(){
        obj.style.background="#ff6600";
}
obj.onmouseout=function(){
        obj.style.background="white";
}
//-->
</SCRIPT>
</BODY>
</HTML>[/runcode]


思路:
1、当用户鼠标经过可编辑区域时,用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时,也就是onclick事件时,先将原来的内容清掉,将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后,点击“保存”按扭时通过ajax向数据库中写入新的数据。
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=83735
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论
发表于 2007-7-25 17:37:25 | 显示全部楼层
酷素材
#@#$#$
回复 支持 反对

使用道具 举报

发表于 2007-8-22 10:48:33 | 显示全部楼层
#kt..jcwcn.com@
这保存没有用啊!
回复 支持 反对

使用道具 举报

发表于 2008-12-26 14:07:17 | 显示全部楼层
不行呀!用不了!
回复 支持 反对

使用道具 举报

发表于 2018-3-13 16:52:23 | 显示全部楼层
酷素材
很不错。。。
回复 支持 反对

使用道具 举报

发表于 2018-3-13 16:39:51 | 显示全部楼层
酷素材
顶顶多好
回复 支持 反对

使用道具 举报

发表于 2018-3-13 16:21:41 | 显示全部楼层
真心顶。。。。
回复 支持 反对

使用道具 举报

发表于 2018-3-13 16:21:24 | 显示全部楼层
很好哦。。。
回复 支持 反对

使用道具 举报

发表于 2018-3-13 16:53:31 | 显示全部楼层
学习了。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则

2345