实时编辑网页网页文字实时编辑，如同TEXTBOX一般

更新时间：2007年03月22日 00:00:00 作者：

<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 porttitor 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. Duis lacinia nisi et lectus. Etiam ac felis et est  sagittis aliquam. Duis vitae nulla. Nam sed nibh. Mauris fermentum sodales nulla. Nam  fringilla. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce consectetuer. <br  /> </span> <hr>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

相关文章

js实现精确到秒的日期选择器完整实例
这篇文章主要介绍了js实现精确到秒的日期选择器,以完整实例形式分析了JavaScript日期选择器的实现步骤与相关技巧,涉及JavaScript针对时间与日期的相关运算,需要的朋友可以参考下
2016-04-04
JavaScript中常见的七种继承及实现
JS的继承方式在我们面试的时候经常会被问到，所以深入理解js继承方式以及它们的优缺点是非常有必要的。本文为大家整理了JavaScript中常见的七种继承及实现，需要的可以参考一下
2023-03-03
用javascript判断IE版本号简单实用且向后兼容
项目中需要判断IE版本号，又因为 jQuery 2.0 去除了对浏览器版本号的判断于是就看到一老外写的一段代码，下面与大家分享下
2013-09-09
JS打印方法的几种方法
本文主要介绍了JS打印方法的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
uni-app入门教程之组件的基本使用
本文主要介绍了uni-app组件的基本使用,包括组件的引入、使用和常见问题解决方法,通过本文的学习,读者可以掌握uni-app组件的基本操作,为开发uni-app应用提供帮助,需要的朋友可以参考下
2023-03-03
学习使用bootstrap3栅格系统
这篇文章主要教会大家学习使用bootstrap3栅格系统，bootstrap开发环境搭建，还介绍了栅格系统的类型，感兴趣的小伙伴们可以参考一下
2016-04-04
echarts3 使用总结（绘制各种图表,地图）
本篇文章主要介绍了echarts3 使用总结，详细的介绍了各种柱状图、折线图、饼图、全国地图等的实现代码，有需要的可以了解一下。
2017-01-01
ajaxControlToolkit AutoCompleteExtender的用法
昨天在搜索中使用了这个控件，不过不知道为什么在IE中反应比较慢
2008-10-10
Javascript Bootstrap的网格系统,导航栏和轮播详解
这篇文章主要为大家介绍了Javascript Bootstrap的网格系统,导航栏和轮播，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
uniapp实现app检查更新与升级详解(uni-upgrade-center)
UniApp是一个跨平台的开发框架,可以同时开发iOS和Android应用,下面这篇文章主要给大家介绍了关于uniapp实现app检查更新与升级(uni-upgrade-center)的相关资料,需要的朋友可以参考下
2023-11-11

最新评论