鲨鱼网
Javascript实现DIV可编辑的两大途径
创始人
2024-07-11 17:50:13
0次

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

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

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

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

  1. > 
  2.  
  3.  
  4. NewDocument</< span>TITLE> <LI class=alt><METANAMEMETANAME="Generator"CONTENT="EditPlus"> <LI><METANAMEMETANAME="Author"CONTENT=""> <LI class=alt><METANAMEMETANAME="Keywords"CONTENT=""> <LI><METANAMEMETANAME="Description"CONTENT=""> <LI class=alt><styletypestyletype="text/css"> <LI>#info{  <LI class=alt>font-size:12px;  <LI>overflow:hidden;  <LI class=alt>background-color:#ffffcc;  <LI>color:black;  <LI class=alt>padding-right:5px;  <LI>padding-left:5px;  <LI class=alt>font-family:courier;  <LI>width:100%;  <LI class=alt>letter-spacing:0;  <LI>line-height:12px;  <LI class=alt>border-style:none;  <LI>}  <LI class=alt></< span>style> <LI></< span>HEAD> <LI class=alt> <LI><BODY> <LI class=alt> <LI><dividdivid="sdf"style="width:400px;"> <LI class=alt><textareaidtextareaid="info"onblur="saveInfo()"onmouseout="saveInfo()"<LI class=alt>onkeyup="setRows()"></< span>textarea> <LI></< span>div> <LI class=alt><scriptlanguagescriptlanguage="JavaScript"> <LI>functionsaveInfo(){  <LI class=alt>vartext=document.getElementById("info").value;  <LI>//再用ajax向数据库中更新当前修改内容  <LI class=alt>}  <LI>functionsetCols(){  <LI class=alt>vartextarea=document.getElementById("info");  <LI>textarea.setAttribute("cols",Math.floor(textarea.clientWidth/7));  <LI class=alt>setRows();  <LI>}  <LI class=alt>functionsetRows(){  <LI>vartextarea=document.getElementById("info");  <LI class=alt>varcols=textarea.cols;  <LI>varstr=textarea.value;  <LI class=alt>strstr=str.replace(/\r\n?/,"\n");  <LI>varlines=2;  <LI class=alt>varchars=0;  <LI>for(i=0;i<str.length;i++){  <LI class=alt>varc=str.charAt(i);  <LI>chars++;  <LI class=alt>if(c=="\n"||chars==cols){  <LI>lines++;  <LI class=alt>chars=0;  <LI>}  <LI class=alt>}  <LI>textarea.setAttribute("rows",lines);  <LI class=alt>textarea.style.height=lines*12+"px";  <LI>}  <LI class=alt>functionsetDefault(){  <LI>vartextarea=document.getElementById("info");  <LI class=alt>textarea.value="单击这里进行编辑";  <LI>}  <LI class=alt>setDefault();  <LI>setCols();  <LI class=alt></< span>script> <LI></< span>BODY> <LI class=alt></< span>HTML> <LI> </LI></OL></PRE>
<P> [Ctrl+A全选注:如需引入外部Js需刷新才能执行]</P>
<P>思路：将textarea通过CSS样式设计成让用户感觉不像是textarea的样子，通过onblur、oumouseout等属性进行ajax保存用户数据。#p#</P>
<P>◆方法二：通过document.createElement的方法向页面增加input来实现。请运行下边代码： </P>
<OL class=dp-xml>
<LI class=alt>
<LI><HTML>  
<LI class=alt><HEAD>  
<LI><TITLE>NewDocument</< SPAN>TITLE>  
<LI class=alt><METANAMEMETANAME="Generator"CONTENT="EditPlus">  
<LI><METANAMEMETANAME="Author"CONTENT="">  
<LI class=alt><METANAMEMETANAME="Keywords"CONTENT="">  
<LI><METANAMEMETANAME="Description"CONTENT="">  
<LI class=alt></< SPAN>HEAD>  
<LI>
<LI class=alt><BODY>  
<LI><dividdivid="gtest">  
<LI class=alt>点击这里就可以编辑   
<LI></< SPAN>div>  
<LI class=alt><SCRIPTLANGUAGESCRIPTLANGUAGE="JavaScript">  </LI></OL>
<P>[Ctrl+A全选注:如需引入外部Js需刷新才能执行]</P>
<P>思路：</P>
<P>1、当用户鼠标经过可编辑区域时，用背景色等方式提醒用户该区域可编辑。</P>
<P>2、当用户鼠标点击该区域时，也就是onclick事件时，先将原来的内容清掉，将临时创建出来一个输入框和一个输入按扭。</P>
<P>3、用户修改完后，点击“保存”按扭时通过ajax向数据库中写入新的数据。</P>
<P>PS：第二个方法的代码还有点问题，有空再来调试一下。</P>
<P>【编辑推荐】</P>
<OL>
<LI><FONT color=#0000ff>DIV自适应高度写法简介</FONT> 
<LI>DIV＋CSS设计IE6、IE7、Firefox兼容性 
<LI>DIV布局规范中CSS类及id命名方式 
<LI>探究DIV显示和隐藏用法 
<LI>将XHTML+CSS页面转换为打印机页面技巧                                         </LI></OL>
<P align=right>【责任编辑：程华权 TEL：（010）68476606】</P>                 <!--end::Text-->
            </div>
            <!--end::Description-->
            <div class="mt-5">
                <!--关键词搜索-->
                            </div>
            <div class="mt-5">
                <p class="fc-show-prev-next">
                    <strong>上一篇：</strong><a href="/chengxu/61427.html">Linux认证复习题100道含答案1-25</a><br>
                </p>
                <p class="fc-show-prev-next">
                    <strong>下一篇：</strong><a href="/chengxu/61429.html">代码示例：IP dhcp snooping配置</a>                </p>
            </div>
            <!--begin::Block-->
            <div class="d-flex flex-stack mb-2 mt-10">
                <!--begin::Title-->
                <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>
                <!--end::Title-->
            </div>
            <div class="separator separator-dashed mb-9"></div>
            <!--end::Block-->
            <div class="row g-10">
                
            </div>


        </div>
        <!--end::Table widget 14-->
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-xl-4 mt-0">
        <!--begin::Chart Widget 35-->
        <div class="card card-flush h-md-100">
            <!--begin::Header-->
            <div class="card-header pt-5 ">
                <!--begin::Title-->
                <h3 class="card-title align-items-start flex-column">
                    <!--begin::Statistics-->
                    <div class="d-flex align-items-center mb-2">
                        <!--begin::Currency-->
                        <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>
                        <!--end::Currency-->
                    </div>
                    <!--end::Statistics-->
                </h3>
                <!--end::Title-->
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-3">

                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/87372.html" class="text-dark fw-bold text-hover-primary fs-6">PHP新手之PHP入门</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/201127.html" class="text-dark fw-bold text-hover-primary fs-6">网络中立的未来 网络中立性是什...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">《牛津词典》中对“网络中立”的解释是“电信运营商应秉持的一种原则，即不考虑来源地提供所有内容和应用的...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/39209.html" class="text-dark fw-bold text-hover-primary fs-6">各种千兆交换机的数据接口类型详...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">千兆交换机有很多值得学习的地方，这里我们主要介绍各种千兆交换机的数据接口类型，作为局域网的主要连接设...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202408/99fac255846c390.jpg')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/110958.html" class="text-dark fw-bold text-hover-primary fs-6">粉嫩如何诠释霸道 东芝M805...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">“霸道粉”是个什么玩意东芝M805拿过来的时候，笔者扑哧笑了，不是笑这款笔记本，而是笑这款产品的颜色...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/163521.html" class="text-dark fw-bold text-hover-primary fs-6">什么是大数据安全 什么是大数据...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在《为什么需要大数据安全分析》一文中，我们已经阐述了一个重要观点，即：安全要素信息呈现出大数据的特征...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/61017.html" class="text-dark fw-bold text-hover-primary fs-6">如何利用交换机和端口设置来管理...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/45708.html" class="text-dark fw-bold text-hover-primary fs-6">全面诠释网络负载均衡</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">负载均衡的出现大大缓解了服务器的压力，更是有效的利用了资源，提高了效率。那么我们现在来说一下网络负载...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/241137.html" class="text-dark fw-bold text-hover-primary fs-6">如何允许远程连接到MySQL数...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">[[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202501/a2b12b6f1823.png')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/185035.html" class="text-dark fw-bold text-hover-primary fs-6">30分钟搞定iOS自定义相机</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">最近公司的项目中用到了相机，由于不用系统的相机，UI给的相机切图，必须自定义才可以。就花时间简单研究...</span>
                    </div>
                    <!--end::Title-->
                </div>
                                <!--begin::Item-->
                <div class="d-flex flex-stack mb-7">
                    <!--begin::Symbol-->
                    <div class="symbol symbol-60px symbol-2by3 me-4">
                        <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div>
                    </div>
                    <!--end::Symbol-->
                    <!--begin::Title-->
                    <div class="m-0">
                        <a href="/chengxu/6024.html" class="text-dark fw-bold text-hover-primary fs-6">Intel将Moblin社区控...</a>
                        <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">本周二，非营利机构Linux基金会宣布，他们将担负起Moblin社区的管理工作，而这之前，Mobli...</span>
                    </div>
                    <!--end::Title-->
                </div>
                
            </div>
            <!--end::Body-->
        </div>
        <!--end::Chart Widget 35-->
    </div>
    <!--end::Col-->
</div>



</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
<!--end::Content wrapper-->
<!--begin::Footer-->
<div id="kt_app_footer" class="app-footer">
    <!--begin::Footer container-->
    <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
        <!--begin::Copyright-->
        <div class="text-dark order-2 order-md-1">
            <span class="text-muted fw-semibold me-1">2026 ©</span>
            <a href="/" target="_blank" class="text-gray-800 text-hover-primary">鲨鱼网</a>
            <a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-800 text-hover-primary"></a>
            <a href="http://spbjmm.com.shayuweb.com">上品网</a><a href="http://www.zzszq.net/">深知网</a><a href="http://ypkjmy.com.shayuweb.com/">一品科技</a><a href="http://www.yuansudz.com/news/">元素网</a><a href="http://code.shayuweb.com/">鲨鱼编程</a><a href="http://xldmm.com.shayuweb.com/">星链岛</a>        </div>
        <!--end::Copyright-->
        <!--begin::Menu-->
        <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                        <li class="menu-item">
                <a href="/news/" target="_blank" class="menu-link px-2">科技资讯</a>
            </li>
                        <li class="menu-item">
                <a href="/chengxu/" target="_blank" class="menu-link px-2">程序开发</a>
            </li>
                        <li class="menu-item">
                <a href="/sitemap.xml" target="_blank" class="menu-link px-2">sitemap</a>
            </li>
        </ul>
        <!--end::Menu-->
    </div>
    <!--end::Footer container-->
</div>
<!--end::Footer-->
</div>
<!--end:::Main-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::App-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
    <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
    <span class="svg-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
            <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
        </svg>
    </span>
    <!--end::Svg Icon-->
</div>
<!--begin::Javascript-->
<script>var hostUrl = "/static/default/pc/";</script>
<!--begin::Global Javascript Bundle(mandatory for all pages)-->
<script src="/static/default/pc/plugins/global/plugins.bundle.js"></script>
<script src="/static/default/pc/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->

<!--end::Javascript-->
</body>
<!--end::Body-->
</html>