Real-time editing of webpage text real-time editing, like TEXTBOX _ javascript skills

Real-time editing of webpage text editing in real time, just like TEXTBOX

<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: 240 p X ;}# 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 = functi On (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, idter) {evt = (evt )? Evt: window. event; if (evt. keyCode = 13 & campo. value! = "") {Elem = document. getElementById (idtoken); 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, IDR) {if (campo. value! = "") {Elem = document. getElementById (idtoken); 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 = \ "n OLight (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 editbox_init () {if (! Document. getElementsByTagName) {return;} var spans = document. getElementsByTagName ("span"); // loop through all span tags for (var I = 0; I setVarsForm ("pageID = profileEdit & userID = 11 & sessionID = 28ydk1_8hefwedkbj73bdibb8h "); script <label> Your name: </label> John Doe <label> Your city: </label> Rotterdam, NL <pr/> AJAX instant edit script-clean HTML Welcome to my blog. today I created this instant up Date script. Click here to try! If you like it you can download and view the source at: yvoschaap.com. have fun and success. <p> Message of the day: <strong> Time Spend Wishing, Is Time Wasted </strong> </p> 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, presponeu, 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. 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/>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]