Javascript实现DIV可编辑的两大途径
本文和大家重点讨论一下用Javascript实现div可编辑的常见方法，这里主要有两种，希望本文的介绍对你的学习有所帮助。
成都创新互联公司是专业的扬州网站建设公司，扬州接单;提供网站建设、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行扬州网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
用Javascript实现div可编辑的常见方法
功能：实现网页内容的即时编辑，增加页面的可用性、交互性。
◆方法一：直接通过textarea标签实现，请运行下边代码：
- >
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> <p> 当前标题：<a href="http://www.shufengxianlan.com/qtweb/news48/148398.html">Javascript实现DIV可编辑的两大途径</a> <br> 本文地址：<a href="http://www.shufengxianlan.com/qtweb/news48/148398.html">http://www.shufengxianlan.com/qtweb/news48/148398.html</a> </p> <p> 网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等 </p> <p class="adpic"> <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： <a href="https://www.cdcxhl.com/" target="_blank">创新互联</a> </p> </div> <div class="newsmorelb"> <p>猜你还喜欢下面的内容</p> <ul> <li> <a href="/qtweb/news47/148397.html">人工智能将在2022年给网络安全领域带来什么 </a> </li><li> <a href="/qtweb/news46/148396.html">电动车怎么使用?（电动车怎么使用电池才耐用)</a> </li><li> <a href="/qtweb/news45/148395.html">前端百题斩之两个角度一个实战了解事件循环</a> </li><li> <a href="/qtweb/news44/148394.html">Android拨号器</a> </li><li> <a href="/qtweb/news43/148393.html">揭秘伪基站背包客：走街串巷发短信日赚200元</a> </li><li> <a href="/qtweb/news42/148392.html">六个人如何运维一万台服务器？</a> </li><li> <a href="/qtweb/news41/148391.html">Linux系统如何删除浏览记录？(linux删除浏览网页)</a> </li><li> <a href="/qtweb/news40/148390.html">详细介绍Java语言的垃圾收集器</a> </li><li> <a href="/qtweb/news39/148389.html">创新互联Python教程：Python中numpy数组如何添加和删除元素</a> </li> </ul> </div> </div> <div class="col-lg-3 noneb"> <div class="bkright" style="margin-top: 0"> <p><a href="https://www.cdcxhl.com/news/jingtai/">静态网站知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news44/412044.html">vivo手机的微信为什么不能放烟花了</a> </li><li> <a class="text_overflow" href="/qtweb/news26/289726.html">教妹学Java：异常处理机制</a> </li><li> <a class="text_overflow" href="/qtweb/news42/460092.html">阿里云服务器怎么看ip？（阿里云服务器地址是什么意思）</a> </li><li> <a class="text_overflow" href="/qtweb/news34/36934.html">租用服务器怎么使用？（租用美国服务器需要做什么测试）</a> </li><li> <a class="text_overflow" href="/qtweb/news40/89940.html">家庭组为什么加入不了</a> </li><li> <a class="text_overflow" href="/qtweb/news48/183348.html">Oracle系统管理员须知：角色权限管理</a> </li><li> <a class="text_overflow" href="/qtweb/news0/90100.html">python二进制</a> </li><li> <a class="text_overflow" href="/qtweb/news21/370621.html">风险剖析：IPv6扩展报头带来的安全隐患</a> </li><li> <a class="text_overflow" href="/qtweb/news46/79696.html">论述：一个人的习惯有多么可怕</a> </li><li> <a class="text_overflow" href="/qtweb/news0/363250.html">高效稳定！阿里云服务器配置指南</a> </li><li> <a class="text_overflow" href="/qtweb/news1/142151.html">数据离线数据存储在Redis集群中（redis集群离线）</a> </li><li> <a class="text_overflow" href="/qtweb/news35/361085.html">如何在Linux下创建用户、为其设置密码并授权</a> </li><li> <a class="text_overflow" href="/qtweb/news1/378551.html">WGA是什么意思？（windows激活工具wga）</a> </li><li> <a class="text_overflow" href="/qtweb/news5/361905.html">创新互联Ruby教程：Ruby异常</a> </li><li> <a class="text_overflow" href="/qtweb/news11/519011.html">Linux进程替换：了解替换过程提高系统稳定性（linux进程替换）</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/link.html" target="_blank">各行业网站</a></p> <ul> <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/pvc/" target="_blank">PVC花箱</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bolimo/" target="_blank">玻璃贴膜</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/zhixiang/" target="_blank">纸箱</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/baiwuyu/" target="_blank">白乌鱼</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/snjbc/" target="_blank">水泥搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/blgds/" target="_blank">玻璃钢雕塑</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/zsljbc/" target="_blank">自上料搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bpfhw/" target="_blank">边坡防护网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/caihui/" target="_blank">墙体彩绘</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/gsdb/" target="_blank">工商代办</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jiulousj/" target="_blank">酒楼设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jianzhudonghua/" target="_blank">建筑动画</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/qchs/" target="_blank">报废汽车回收</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/xiangsu/" target="_blank">橡塑保温</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jszz/" target="_blank">假山制作</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/weixiufdj/" target="_blank">发电机维修</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="https://www.cdcxhl.cn/" target="_blank">腾讯香港免备案空间</a> <a href="http://www.36103.cn/mobile/" target="_blank">成都手机网站开发</a> <a href="http://www.pzhzwz.com/" target="_blank">攀枝花网站建设</a> <a href="http://www.cxhlcq.com/mobile/" target="_blank">重庆手机网站建设</a> <a href="http://www.cdxtjz.cn/" target="_blank">成都网站建设</a> <a href="http://www.cxhljz.cn/" target="_blank">成都网站建设公司</a> <a href="http://m.xwcx.net/wechat/" target="_blank">成都微信二次开发</a> <a href="https://www.cdxwcx.com/cloud/" target="_blank">云服务器</a> <a href="https://www.cdcxhl.com/quanwang.html" target="_blank">全网营销推广</a> <a href="http://www.ycggtw.cn/" target="_blank">金羊影视传媒</a> <a href="http://www.gdjierui.cn/" target="_blank">轻质隔墙板</a> <a href="http://www.cdkjz.cn/wangzhan/waimao/" target="_blank">成都外贸网站建设</a> <a href="http://www.kswcd.com/service/" target="_blank">高端网站建设</a> <a href="http://www.cdxwcx.cn/tuoguan/zuyong.html" target="_blank">成都服务器租用</a> <a href="http://chengdu.cdcxhl.com/mb/" target="_blank">成都模板网站</a> <a href="http://www.cxjianzhan.cn/fwxm/pinpai.html" target="_blank">品牌官网设计</a> <a href="http://seo.cdcxhl.cn/" target="_blank">成都SEO公司</a> <a href="http://www.kswsj.com/" target="_blank">成都网站设计</a> <a href="https://www.cdcxhl.com/idc/guanghua.html" target="_blank">成都光华机房</a> <a href="http://www.scaimingsi.com/" target="_blank">四川艾名斯</a> </div> </div> <footer> <div class="carousel-inner footjz"> <div class="container"> <i class="icon iconfont zbw"></i> 高品质定制 <i class="icon iconfont"></i> 跨终端自动兼容 <i class="icon iconfont"></i> 节约开发成本 <i class="icon iconfont"></i> 开发周期短 <i class="icon iconfont"></i> 一体化服务 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始2800定制网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</button> </div> </div> <div class="carousel-inner bqsy"> <div class="container"> <div class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>：532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>：631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>：532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>：631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a> <div class="dz">创新互联建站专注： <a href="https://www.cdcxhl.com/" target="_blank">网站设计</a> <a href="https://www.cdcxhl.com/" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" target="_blank">网站建设</a> <address>地址：成都太升南路288号锦天国际A幢10楼</address> </div> </div> <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联"> <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br> Tel：400-028-6601（7x24h）</p></div> </div> </div> </footer> </body> </html> <script> $.getJSON ("../../qtwebpic.txt", function (data) { var jsonContent = { "featured":data } var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)]; $(".adpic .adimg").attr("href",random.link) $(".adpic img").attr("src",random.pic); }) </script>