答案： <style type='text/css'> body{ font-family: verdana; font-size: .9em; } input, textarea, pre{ font-family: verdana; font-size: inherit; font-family: inherit; } label{ width: 110px; } #userName, #userName_field{ font-size: 14px; } #cityName, #cityName_field{ font-size: 14px; background-color: #333; color: #fff; } #blogTitle, #blogTitle_field{ font-size: 24px; } #blogText, #blogText_field{ width: 240px; } #lorumText, #lorumText_field{ width: 500px; } </style> <script type="text/javascript"> function datosServidor() { }; datosServidor.prototype.iniciar = function() { try { // Mozilla / Safari this._xh = new XMLHttpRequest(); } catch (e) { // Explorer var _ieModelos = new Array( 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ); var success = false; for (var i=0;i < _ieModelos.length && !success; i++) { try { this._xh = new ActiveXObject(_ieModelos[i]); success = true; } catch (e) { // Implementar manejo de excepciones } } if ( !success ) { // Implementar manejo de excepciones, mientras alerta. return false; } return true; } } datosServidor.prototype.ocupado = function() { estadoActual = this._xh.readyState; return (estadoActual && (estadoActual < 4)); } datosServidor.prototype.procesa = function() { if (this._xh.readyState == 4 && this._xh.status == 200) { this.procesado = true; } } datosServidor.prototype.enviar = function(urlget,datos) { if (!this._xh) { this.iniciar(); } if (!this.ocupado()) { this._xh.open("GET",urlget,false); this._xh.send(datos); if (this._xh.readyState == 4 && this._xh.status == 200) { return this._xh.responseText; } } return false; } var urlBase = "update.php"; var formVars = ""; var changing = false; function fieldEnter(campo,evt,idfld) { evt = (evt) ? evt : window.event; if (evt.keyCode == 13 && campo.value!="") { elem = document.getElementById( idfld ); remotos = new datosServidor; nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,""); //remove glow noLight(elem); elem.innerHTML = nt; changing = false; return false; } else { return true; } } function fieldBlur(campo,idfld) { if (campo.value!="") { elem = document.getElementById( idfld ); remotos = new datosServidor; nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,""); elem.innerHTML = nt; changing = false; return false; } } //edit field created function cambia(actual) { if(!changing){ width = widthEl(actual.id) + 20; height =heightEl(actual.id) + 2; if(width < 100) width = 150; if(height < 40) actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />"; else actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>"; changing = true; } actual.firstChild.focus(); } //find all span tags with class editText and id as fieldname parsed to update script. add onclick function function editbox_init(){ if (!document.getElementsByTagName){ return; } var spans = document.getElementsByTagName("span"); // loop through all span tags for (var i=0; i<spans.length; i++){ var spn = spans[i]; if (((' '+spn.className+' ').indexOf("editText") != -1) && (spn.id)) { spn.onclick = function () { cambia(this); } spn.style.cursor = "pointer"; spn.title = "Click to edit!"; } } } //crossbrowser load function function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent){ var r = elm.attachEvent("on"+evType, fn); return r; } else { alert("Please upgrade your browser to use full functionality on this page"); } } //get width of text element function widthEl(span){ if (document.layers){ w=document.layers[span].clip.width; } else if (document.all && !document.getElementById){ w=document.all[span].offsetWidth; } else if(document.getElementById){ w=document.getElementById(span).offsetWidth; } return w; } //get height of text element function heightEl(span){ if (document.layers){ h=document.layers[span].clip.height; } else if (document.all && !document.getElementById){ h=document.all[span].offsetHeight; } else if(document.getElementById){ h=document.getElementById(span).offsetHeight; } return h; } function highLight(span){ span.parentNode.style.border = "2px solid #D1FDCD"; span.parentNode.style.padding = "0"; span.style.border = "1px solid #54CE43"; } function noLight(span){ span.parentNode.style.border = "0px"; span.parentNode.style.padding = "2px"; span.style.border = "0px"; } //sets post/get vars for update function setVarsForm(vars){ formVars = vars; } addEvent(window, "load", editbox_init); </script> <script type="text/javascript"> setVarsForm("pageID=profileEdit&userID=11&sessionID=28ydk3478Hefwedkbj73bdIB8H"); </script> <label>Your name:</label> <span id="userName" class="editText">John Doe</span> <label>Your city:</label> <span id="cityName" class="editText">Rotterdam, NL</span> <hr /> <h1><span id="blogTitle" class="editText">AJAX instant edit script - clean HTML</span></h1> <span id="blogText" class="editText">Welcome to my blog. Today i created this instant update script. Click here to try! If you like it you can download and view the source at: yvoschaap.com. Have fun and success.</span> <p>Message of the day:<strong><span id="messageDay" class="editText">Time Spend Wishing, Is Time Wasted</span></strong></p> <hr> <span id="lorumText" class="editText">Check the source code of this page. No crazy JS!! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut faucibus commodo lacus. Donec egestas magna et risus. Etiam velit tellus, sagittis eget, pretium eu, sagittis ut, sem. Aliquam est. Nam condimentum. In massa ligula, varius in, aliquet vehicula, facilisis id, ante. Sed purus. Vestibulum tempus facilisis lectus. Phasellus convallis, lorem in bibendum convallis, nunc nisl fringilla sem, ut nonummy turpis nunc sed risus. Aliquam bibendum semper ipsum. In hac habitasse platea dictumst. Maecenas vulputate, nisl nec tempus rutrum, tortor ligula interdum urna, eget port易做图 risus sem eu odio. Nullam vel leo sed enim sodales euismod. Phasellus volutpat purus sit amet erat. Nulla ut enim. Nullam tempus enim eget lacus. Nulla a nibh eu enim bibendum bibendum. Nunc justo. Vivamus sagittis sollicitudin lacus</pre><p>上一个：<a href="/show/f17ebe0070e9c76b.htm">用JQuery 实现的自定义对话框</a><br/>下一个：<a href="/show/b76b574c7e362289.htm">dojo 之基础篇(二)之从服务器读取数据</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/c2508445a6edca68.htm"><img src='/upload/20120926/20101211120224-1758429549.jpg' width=105 height=105><br/>ssh框架中利用Ajax如何解决从服务器传到jsp页面中文乱码问题？</a></li><li><a href="/show/b1833a9d57897582.htm"><img src='/upload/20121013/None.gif' width=105 height=105><br/>jQuery使用手册之二 DOM操作</a></li><li><a href="/show/0be0d04f59af1919.htm"><img src='/upload/20121013/holiday06_2.gif' width=105 height=105><br/>图片从右至左滚动JS</a></li><li><a href="/show/340a2f518526a6f6.htm"><img src='/upload/20137/5/20130705140432389.jpg' width=105 height=105><br/>img标签中图片加载失败onerror用法优化和参数</a></li><li><a href="/show/7e741d13c64a14f9.htm"><img src='/upload/2013111519/20131019010421714.jpg' width=105 height=105><br/>solr 返回的json数据</a></li><li><a href="/show/da19a32403fd6529.htm"><img src='/upload/2013111519/20130414102126807.jpg' width=105 height=105><br/>ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合三：EF构建持久层</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/7_1.htm">JS</a>疑问解答：</dt><dd><a target="_blank" href="/show/31f300d314d4c0d3.htm">几个验证11位手机号码格式的js代码</a></dd><dd><a target="_blank" href="/show/b636313fd0bf206e.htm">js把图片转换成 base64代码</a></dd><dd><a target="_blank" href="/show/f104aaf60c037fed.htm">js把base代码转换成图片</a></dd><dd><a target="_blank" href="/show/02f65fc48980b1fe.htm">JS 将 base64编码的图片转化为图片文件</a></dd><dd><a target="_blank" href="/show/5044556d492a3bd0.htm">js中的定时器</a></dd><dd><a target="_blank" href="/show/7d909e714c0774e2.htm">js如何获得FCKeditor控件的值</a></dd><dd><a target="_blank" href="/show/b4327bdd4ebbebcb.htm">用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...</a></dd><dd><a target="_blank" href="/show/cbcc4d7336496819.htm">JS验证，这块“牛皮”反复修改都不能实现</a></dd><dd><a target="_blank" href="/show/cb91bc419542ce9f.htm">在JS中使用DOM模型</a></dd><dd><a target="_blank" href="/show/897f78948b91f031.htm">如何用JS 获取本地文件夹的文件列表</a></dd><dd><a target="_blank" href="/show/58cf22df63d3344a.htm">js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？</a></dd><dd><a target="_blank" href="/show/b1e97b258c9ed0b3.htm">求实现自动生成图片缩略图的JS代码</a></dd><dd><a target="_blank" href="/show/59e5b8e1f4421028.htm">JS脚本网页问题</a></dd><dd><a target="_blank" href="/show/2c3f71b731258761.htm">js，代码中"object"和"Object"区别？</a></dd><dd><a target="_blank" href="/show/b281b7d5eabf3339.htm">js+flash实现网页图片切换效果，出现边框，单击激活此控件。</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd><dd><a href="/list/71_1.htm">微信小程序</a></dd><dd><a href="/list/72_1.htm">thinkphp</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved<br/>部分文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>