成都创新互联网站制作重庆分公司

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

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

成都创新互联公司是专业的扬州网站建设公司，扬州接单;提供网站建设、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行扬州网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

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

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

 
 
 
    
  
  
  
  1. > 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. NewDocument TITLE> </li>
  
  
  <li><METANAMEMETANAME="Generator"CONTENT="EditPlus"> </li>
  
  
  <li><METANAMEMETANAME="Author"CONTENT=""> </li>
  
  
  <li><METANAMEMETANAME="Keywords"CONTENT=""> </li>
  
  
  <li><METANAMEMETANAME="Description"CONTENT=""> </li>
  
  
  <li><styletypestyletype="text/css"> </li>
  
  
  <li>#info{  </li>
  
  
  <li>font-size:12px;  </li>
  
  
  <li>overflow:hidden;  </li>
  
  
  <li>background-color:#ffffcc;  </li>
  
  
  <li>color:black;  </li>
  
  
  <li>padding-right:5px;  </li>
  
  
  <li>padding-left:5px;  </li>
  
  
  <li>font-family:courier;  </li>
  
  
  <li>width:100%;  </li>
  
  
  <li>letter-spacing:0;  </li>
  
  
  <li>line-height:12px;  </li>
  
  
  <li>border-style:none;  </li>
  
  
  <li>}  </li>
  
  
  <li> style> </li>
  
  
  <li> HEAD> </li>
  
  
  <li> </li>
  
  
  <li><BODY> </li>
  
  
  <li> </li>
  
  
  <li><dividdivid="sdf"style="width:400px;"> </li>
  
  
  <li><textareaidtextareaid="info"onblur="saveInfo()"onmouseout="saveInfo()"</li>
  
  
  <li>onkeyup="setRows()"> textarea> </li>
  
  
  <li> div> </li>
  
  
  <li><scriptlanguagescriptlanguage="JavaScript"> </li>
  
  
  <li>functionsaveInfo(){  </li>
  
  
  <li>vartext=document.getElementById("info").value;  </li>
  
  
  <li>//再用ajax向数据库中更新当前修改内容  </li>
  
  
  <li>}  </li>
  
  
  <li>functionsetCols(){  </li>
  
  
  <li>vartextarea=document.getElementById("info");  </li>
  
  
  <li>textarea.setAttribute("cols",Math.floor(textarea.clientWidth/7));  </li>
  
  
  <li>setRows();  </li>
  
  
  <li>}  </li>
  
  
  <li>functionsetRows(){  </li>
  
  
  <li>vartextarea=document.getElementById("info");  </li>
  
  
  <li>varcols=textarea.cols;  </li>
  
  
  <li>varstr=textarea.value;  </li>
  
  
  <li>strstr=str.replace(/\r\n?/,"\n");  </li>
  
  
  <li>varlines=2;  </li>
  
  
  <li>varchars=0;  </li>
  
  
  <li>for(i=0;i<str.length;i++){  </li>
  
  
  <li>varc=str.charAt(i);  </li>
  
  
  <li>chars++;  </li>
  
  
  <li>if(c=="\n"||chars==cols){  </li>
  
  
  <li>lines++;  </li>
  
  
  <li>chars=0;  </li>
  
  
  <li>}  </li>
  
  
  <li>}  </li>
  
  
  <li>textarea.setAttribute("rows",lines);  </li>
  
  
  <li>textarea.style.height=lines*12+"px";  </li>
  
  
  <li>}  </li>
  
  
  <li>functionsetDefault(){  </li>
  
  
  <li>vartextarea=document.getElementById("info");  </li>
  
  
  <li>textarea.value="单击这里进行编辑";  </li>
  
  
  <li>}  </li>
  
  
  <li>setDefault();  </li>
  
  
  <li>setCols();  </li>
  
  
  <li> script> </li>
  
  
  <li> BODY> </li>
  
  
  <li> HTML> </li>
  
  
  <li> </li>
 
 
 </ol></pre><p> [Ctrl+A全选注:如需引入外部Js需刷新才能执行]</p><p>思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。#p#</p><p>◆方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码： </p><ol>
<li> </li>
<li><HTML>  </li>
<li><HEAD>  </li>
<li><TITLE>NewDocument TITLE>  </li>
<li><METANAMEMETANAME="Generator"CONTENT="EditPlus">  </li>
<li><METANAMEMETANAME="Author"CONTENT="">  </li>
<li><METANAMEMETANAME="Keywords"CONTENT="">  </li>
<li><METANAMEMETANAME="Description"CONTENT="">  </li>
<li> HEAD>  </li>
<li> </li>
<li><BODY>  </li>
<li><dividdivid="gtest">  </li>
<li>点击这里就可以编辑   </li>
<li> div>  </li>
<li><SCRIPTLANGUAGESCRIPTLANGUAGE="JavaScript">  </li>
</ol>
<p> </p><p>[Ctrl+A全选注:如需引入外部Js需刷新才能执行]</p><p>思路：</p><p>1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。</p><p>2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。</p><p>3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。</p><p>PS：第二个方法的代码还有点问题，有空再来调试一下。</p>            <br>
            文章题目：Javascript实现DIV可编辑的两大途径            <br>
            文章URL：<a href="http://www.cxhlcq.cn/article/cogddjd.html">http://www.cxhlcq.cn/article/cogddjd.html</a>
        </div>
    </div>
</div>
<div class="other container">
    <h3>其他资讯</h3>
    <ul>
        <li>
                <a href="/article/cdohgpd.html">想知道电信客服工作怎么样？(湖北电信客服怎么样啊)</a>
            </li><li>
                <a href="/article/cdohgjh.html">Redis热点数据的备份保全（redis热点备份）</a>
            </li><li>
                <a href="/article/cdohgpi.html">电信IDC机房费用是多少？（西安联通托管服务器价格）</a>
            </li><li>
                <a href="/article/cdohgjg.html">了解ASP.NETMVC是什么</a>
            </li><li>
                <a href="/article/cdohgic.html">香港服务器使用方法？用香港服务器的好处</a>
            </li>    </ul>
</div>
<div class="footer">
    <div class="foota container">
        <div class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <ul>
                <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                    <h3>网站制作</h3>
                    <a href="http://www.cxjianzhan.com/" target="_blank">成都网站制作</a><a href="http://www.cdxwcx.cn/" target="_blank">成都网站制作</a><a href="http://www.cxjianzhan.com/mobile/" target="_blank">wap网站制作</a><a href="https://www.cdcxhl.com/" target="_blank">成都网站制作</a><a href="http://chengdu.cdcxhl.com/" target="_blank">成都网站制作</a><a href="http://www.cdxwcx.cn/bj/" target="_blank">网站制作报价</a>                </li>
                <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                    <h3>企业服务</h3>
                    <a href="https://www.cdcxhl.com/service/zzgj.html" target="_blank">备案资质管家服务</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">网站快速收录</a><a href="https://www.cdcxhl.com/shoulu/" target="_blank">网站免费收录</a><a href="https://www.cdcxhl.com/ruanwen/" target="_blank">软文营销</a><a href="https://www.cdcxhl.com/service/trademark.html" target="_blank">商标注册</a><a href="https://www.cdcxhl.com/service/wenwangwen.html" target="_blank">网络文化经营许可证</a>                </li>
                <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                    <h3>网站建设</h3>
                    <a href="http://www.cdkjz.cn/fangan/" target="_blank">成都网站建设哪家好</a><a href="https://www.cdxwcx.com/city/wenjiang/" target="_blank">温江网站建设</a><a href="http://www.cdkjz.cn/fangan/education/" target="_blank">教育培训网站建设方案</a><a href="https://www.cdxwcx.com/city/guanghan/" target="_blank">广汉网站建设</a><a href="http://m.cdcxhl.cn/mobile/" target="_blank">网站建设公司</a><a href="https://www.cdxwcx.com/city/dujiangyan/" target="_blank">都江堰网站建设</a>                </li>
                <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                    <h3>服务器托管</h3>
                    <a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" target="_blank">绵阳机房租用</a><a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" target="_blank">绵阳托管服务器</a><a href="http://www.cdfuwuqi.com/tuoguan/duoxian/" target="_blank">多线服务器托管</a><a href="https://www.cdcxhl.com/idc/wenjiang.html" target="_blank">温江服务器托管</a><a href="https://www.xwcx.net/tgxq/cdghjf.html" target="_blank">成都光华机房</a><a href="https://www.cdxwcx.com/jifang/guanghua.html" target="_blank">光华服务器托管</a>                </li>
            </ul>
        </div>
        <div class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <p>全国免费咨询:</p>
            <b>400-028-6601</b>
            <p>业务咨询：028-86922220 / 13518219792</p>
            <p>节假值班：18980820575 / 13518219792</p>
            <p>联系地址：成都市太升南路288号锦天国际A幢1002号</p>
        </div>
    </div>
    <div class="footb">
        <div class="copy container">
            <div class="fl">Copyright © 成都创新互联科技有限公司重庆分公司  <a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2021005571号</a></div>
            <!--<div class="fr"><a href="https://www.cdxwcx.com/" target="_blank">成都网站建设</a>：<a href="https://www.cdcxhl.com/" target="_blank">创新互联</a></div>-->
        </div>
    </div>
    <div class="link">
        <div class="container">
            友情链接:：
            <a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a>
            <a href="https://www.cdcxhl.com/city/chongqing.html" target="_blank">重庆网站建设</a>
            <a href="">四川网站建设</a>
            <a href="">重庆建设网站</a>
            <a href="https://www.cdxwcx.com/jifang/xiyun.html" target="_blank">移动服务器托管</a>
            <a href="http://www.cdfuwuqi.com/" target="_blank">成都服务器托管</a>
            <a href="https://www.cdcxhl.cn/" target="_blank">云服务器</a>
            <a href="http://www.cdhuace.com/" target="_blank">广告设计制作</a>
            <a href="https://www.cdcxhl.com/sheji/chongqing.html" target="_blank">重庆网页设计</a>
            <a href="https://www.cdcxhl.com/zuo/chongqing.html" target="_blank">重庆做网站</a>
            <a href="https://www.cdcxhl.com/zhizuo/chongqing.html" target="_blank">重庆网站制作</a>
            <a href="">重庆网站建设</a>
            <a href="">重庆网站公司</a>
            <a href="">渝中网站制作</a>
            <a href="">重庆网站设计</a>
        </div>
    </div>
</div>
<div class="foot">
    <ul class="public-celan">
        <li>
            <a href="https://p.qiao.baidu.com/cps3/chatIndex?siteToken=6ce441ff9e2d6bedbdfc2a4138de449e&speedLogId=162260383240185e3_1622603832401_02407&eid=6256368&reqParam=%7B%22from%22%3A1%2C%22sessionid%22%3A%22-100%22%2C%22siteId%22%3A%2211284691%22%2C%22tid%22%3A%22-1%22%2C%22userId%22%3A%226256368%22%2C%22ttype%22%3A1%2C%22pageId%22%3A0%7D" target="_blank" class="a1 db tc">
                <img src="/Public/Home/img/icon-23.png" alt="" class="db auto">
                <span class="span-txt">在线咨询</span>
            </a>
        </li>
        <li>
            <a href="tel:18980820575" class="a1 db tc">
                <img src="/Public/Home/img/icon-24.png" alt="" class="db auto">
                <span class="span-txt">电话咨询</span>
            </a>
        </li>
        <li>
            <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc">
                <img src="/Public/Home/img/icon-25.png" alt="" class="db auto">
                <span class="span-txt">QQ咨询</span>
            </a>
        </li>
        <li>
            <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up">
                <img src="/Public/Home/img/icon-26.png" alt="" class="db auto">
                <span class="span-txt">预约顾问</span>
            </a>
        </li>
    </ul>
</div>
<div class="customer">
    <dl class="icon1">
        <dt>
            <a href="tencent://message/?uin=1683211881&Site=&Menu=yes">
                <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i>
                <p>在线咨询</p>
            </a>
        </dt>
    </dl>
    <dl class="icon2">
        <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨询</p></dt>
        <dd><img src="/Public/Home/img/ewm.png"></dd>
    </dl>
    <dl class="icon3">
        <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>电话咨询</p></dt>
        <dd>
            <p>028-86922220（工作日）</p>
            <p>18980820575（7×24）</p>
        </dd>
    </dl>
    <dl class="icon4">
        <dt class="sShow">
            <a href="tencent://message/?uin=244261566&Site=&Menu=yes">
                <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p>
            </a>
        </dt>
    </dl>
    <dl class="icon5">
        <dt class="gotop">
            <a href="#top">
                <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回顶部</p>
            </a>
        </dt>
    </dl>
</div>
</body>
</html>
<script>
    $(".con img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>