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.kswsj.com/qtweb/news48/148398.html">Javascript实现DIV可编辑的两大途径</a> <br> 当前网址：<a href="http://www.kswsj.com/qtweb/news48/148398.html">http://www.kswsj.com/qtweb/news48/148398.html</a> </p> <p> 网站建设、网络推广公司-成都快上网，一家网站设计、网站制作公司；服务项目有等 </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="http://www.kswsj.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/sheji/">网站设计知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news2/209102.html">OneProvider的服务器怎么样？全面解析</a> </li><li> <a class="text_overflow" href="/qtweb/news8/195058.html">DataWorks怎么访问a空间的maxcompute数据源a</a> </li><li> <a class="text_overflow" href="/qtweb/news22/324822.html">dns地址一般是多少,常见的dns地址是多少</a> </li><li> <a class="text_overflow" href="/qtweb/news21/364121.html">也谈Devops与微服务，有分亦有合</a> </li><li> <a class="text_overflow" href="/qtweb/news16/509816.html">每秒上千订单场景下的分布式锁高并发优化实践！</a> </li><li> <a class="text_overflow" href="/qtweb/news18/465768.html">如何让html提交按钮有图片</a> </li><li> <a class="text_overflow" href="/qtweb/news22/98222.html">体验一把Flowable三种常见网关</a> </li><li> <a class="text_overflow" href="/qtweb/news20/501220.html">pywifi模块用法详解？（windowspypip）</a> </li><li> <a class="text_overflow" href="/qtweb/news5/13205.html">存储函数_段页式存储函数</a> </li><li> <a class="text_overflow" href="/qtweb/news26/182476.html">智能家居新时代：RakSmart产品让生活更便捷</a> </li><li> <a class="text_overflow" href="/qtweb/news36/446286.html">视觉智能产品可以实现对翻拍的检测吗？</a> </li><li> <a class="text_overflow" href="/qtweb/news38/538588.html">香港vps被攻击后多久恢复？</a> </li><li> <a class="text_overflow" href="/qtweb/news39/87839.html">备案制需要多久,医院备案制试用期多久</a> </li><li> <a class="text_overflow" href="/qtweb/news9/493809.html">实用工具SwingUtilities</a> </li><li> <a class="text_overflow" href="/qtweb/news40/345340.html">Linux服务器安全策略技巧：安全启动设置</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/" 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/xiaoguotu/" 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/weilanhulan/" 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/chalousj/" 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/yupeng/" 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/qzgqb/" 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/zhendongpan/" 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/kafeitingsj/" 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/bolixiufu/" 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/shachuang/" 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/shilongwang/" 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/boligeduan/" 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/blgzd/" 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/sljbc/" 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/opp/" target="_blank">OPP胶袋</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://m.cdcxhl.cn/shop/ " target="_blank">商城系统开发</a> <a href="http://www.36103.cn/" target="_blank">成都网站制作</a> <a href="http://www.cqcxhl.com/" target="_blank">网站建设公司</a> <a href="http://www.cdiso.cn/" target="_blank">小谭建站</a> <a href="http://www.ybwzjz.com/" target="_blank">宜宾网站设计</a> <a href="https://www.cdxwcx.com/wangzhan/gaiban.html" target="_blank">网页改版</a> <a href="http://m.cdcxhl.com/dingzhi.html" target="_blank">定制网站建设多少钱</a> <a href="http://www.cdhuace.com/zhaopai.html" target="_blank">成都广告招牌</a> <a href="http://seo.cdkjz.cn/seo/" target="_blank">成都SEO优化公司</a> <a href="http://www.cdkjz.cn/fangan/store/" target="_blank">电商网站建设方案</a> <a href="http://seo.cdkjz.cn/mobile/" target="_blank">营销型网站建设</a> <a href="http://www.cdkjz.cn/" target="_blank">成都网站制作</a> <a href="http://www.myzitong.com/" target="_blank">梓潼做网站</a> <a href="https://www.cdcxhl.com/sheji/chengdu.html" target="_blank">四川成都网站设计</a> <a href="http://www.cdkjz.cn/wangzhan/yunying/" target="_blank">成都网站代运营</a> <a href="http://www.cdhuace.com/faguangzi/bfg.html" target="_blank">亚克力背部发光字</a> <a href="http://www.dmvi.cn/ser/VI/" target="_blank">成都VI设计</a> <a href="http://www.cdxwcx.cn/tuoguan/meishan.html" target="_blank">眉山电信机房托管</a> <a href="https://www.cdcxhl.com/xiangyingshi.html" target="_blank">响应式网站设计</a> <a href="https://www.cdxwcx.com/city/shuangliu/" 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> 600元建站 <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'"> 立即开始600元网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 600元企业网站建设</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="http://www.kswsj.com/" target="_blank">成都网站制作</a> <a href="http://www.kswsj.com/" target="_blank">网站设计</a> <a href="http://www.kswsj.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：028-86922220（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>