实时编辑网页网页文字实时编辑，如同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需再刷新一下页面才能执行]

相关文章

JavaScript常用脚本汇总（一）
这篇文章主要介绍了JavaScript常用脚本汇总系列的第一篇，给大家分享的是jquery限制文本框只能输入数字、封装DOMContentLoaded事件、用原生JS对AJAX做简单封装、跨域请求之JSONP、千分位格式化，有需要的小伙伴们参考下吧。
2015-03-03
JavaScript防抖动与节流处理
这篇文章介绍了JavaScript防抖动与节流处理的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
Bootstrap实现圆角、圆形头像和响应式图片
这篇文章主要介绍了Bootstrap实现圆角、圆形头像和响应式图片的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
鼠标焦点离开文本框时验证的js代码
本文为大家介绍下利用js来验证文本框的值，当鼠标焦点离开文本框时进行验证，示例代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
JavaScript 数组的进化与性能分析
这篇文章主要介绍了JavaScript 数组的进化与性能分析,本文讲得更多的是内存、优化、语法差异、性能、近来的演进。需要的朋友可以参考下
2017-09-09
Bootstrap CSS使用方法
这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
JavaScript中的原型链prototype介绍
这篇文章主要介绍了JavaScript中的原型链prototype介绍,本文讲解了访问原型对象的3种方法,判断两个对象间是否存在原型链关系的方法等,需要的朋友可以参考下
2014-12-12
JS如何获取地址栏的参数实例讲解
本篇文章给大家带来了关于JS如何获取地址栏的参数实例讲解，有需要的朋友们参考下。
2018-10-10
!DOCTYPE声明对JavaScript的影响分析
DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。
2010-04-04
js跳转到指定url的方法与实际使用
这篇文章主要给大家介绍了关于js跳转到指定url的方法与实际使用的相关资料,要实现JavaScript跳转到指定URL,可以使用window.location对象来实现,需要的朋友可以参考下
2023-09-09

最新评论