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

} 
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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20datosServidor()%20%7B%20%0D%0A%7D%3B%20%0D%0AdatosServidor.prototype.iniciar%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20try%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20Mozilla%20%2F%20Safari%20%0D%0A%20%20%20%20%20%20%20%20this._xh%20%3D%20new%20XMLHttpRequest()%3B%20%0D%0A%20%20%20%20%7D%20catch%20(e)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20Explorer%20%0D%0A%20%20%20%20%20%20%20%20var%20_ieModelos%20%3D%20new%20Array(%20%0D%0A%20%20%20%20%20%20%20%20'MSXML2.XMLHTTP.5.0'%2C%20%0D%0A%20%20%20%20%20%20%20%20'MSXML2.XMLHTTP.4.0'%2C%20%0D%0A%20%20%20%20%20%20%20%20'MSXML2.XMLHTTP.3.0'%2C%20%0D%0A%20%20%20%20%20%20%20%20'MSXML2.XMLHTTP'%2C%20%0D%0A%20%20%20%20%20%20%20%20'Microsoft.XMLHTTP'%20%0D%0A%20%20%20%20%20%20%20%20)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20success%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20for%20(var%20i%3D0%3Bi%20%3C%20_ieModelos.length%20%26%26%20!success%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20try%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this._xh%20%3D%20new%20ActiveXObject(_ieModelos%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%20%3D%20true%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20catch%20(e)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Implementar%20manejo%20de%20excepciones%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if%20(%20!success%20)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Implementar%20manejo%20de%20excepciones%2C%20mientras%20alerta.%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0AdatosServidor.prototype.ocupado%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20estadoActual%20%3D%20this._xh.readyState%3B%20%0D%0A%20%20%20%20return%20(estadoActual%20%26%26%20(estadoActual%20%3C%204))%3B%20%0D%0A%7D%20%0D%0A%0D%0AdatosServidor.prototype.procesa%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20if%20(this._xh.readyState%20%3D%3D%204%20%26%26%20this._xh.status%20%3D%3D%20200)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20this.procesado%20%3D%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0AdatosServidor.prototype.enviar%20%3D%20function(urlget%2Cdatos)%20%7B%20%0D%0A%20%20%20%20if%20(!this._xh)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20this.iniciar()%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if%20(!this.ocupado())%20%7B%20%0D%0A%20%20%20%20%20%20%20%20this._xh.open(%22GET%22%2Curlget%2Cfalse)%3B%20%0D%0A%20%20%20%20%20%20%20%20this._xh.send(datos)%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(this._xh.readyState%20%3D%3D%204%20%26%26%20this._xh.status%20%3D%3D%20200)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20this._xh.responseText%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20return%20false%3B%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0Avar%20urlBase%20%3D%20%22update.php%22%3B%20%0D%0Avar%20formVars%20%3D%20%22%22%3B%20%0D%0Avar%20changing%20%3D%20false%3B%20%0D%0A%0D%0A%0D%0Afunction%20fieldEnter(campo%2Cevt%2Cidfld)%20%7B%20%0D%0A%20%20%20%20evt%20%3D%20(evt)%20%3F%20evt%20%3A%20window.event%3B%20%0D%0A%20%20%20%20if%20(evt.keyCode%20%3D%3D%2013%20%26%26%20campo.value!%3D%22%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20elem%20%3D%20document.getElementById(%20idfld%20)%3B%20%0D%0A%20%20%20%20%20%20%20%20remotos%20%3D%20new%20datosServidor%3B%20%0D%0A%20%20%20%20%20%20%20%20nt%20%3D%20remotos.enviar(urlBase%20%2B%20%22%3Ffieldname%3D%22%20%2Bescape(elem.id)%2B%20%22%26content%3D%22%2Bescape(campo.value)%2B%22%26%22%2BformVars%2C%22%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2Fremove%20glow%20%0D%0A%20%20%20%20%20%20%20%20noLight(elem)%3B%20%0D%0A%20%20%20%20%20%20%20%20elem.innerHTML%20%3D%20nt%3B%20%0D%0A%20%20%20%20%20%20%20%20changing%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20false%3B%20%0D%0A%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%0D%0A%7D%20%0D%0A%0D%0Afunction%20fieldBlur(campo%2Cidfld)%20%7B%20%0D%0A%20%20%20%20if%20(campo.value!%3D%22%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20elem%20%3D%20document.getElementById(%20idfld%20)%3B%20%0D%0A%20%20%20%20%20%20%20%20remotos%20%3D%20new%20datosServidor%3B%20%0D%0A%20%20%20%20%20%20%20%20nt%20%3D%20remotos.enviar(urlBase%20%2B%20%22%3Ffieldname%3D%22%20%2Bescape(elem.id)%2B%20%22%26content%3D%22%2Bescape(campo.value)%2B%22%26%22%2BformVars%2C%22%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20elem.innerHTML%20%3D%20nt%3B%20%0D%0A%20%20%20%20%20%20%20%20changing%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20false%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2Fedit%20field%20created%20%0D%0Afunction%20cambia(actual)%20%7B%20%0D%0A%20%20%20%20if(!changing)%7B%20%0D%0A%20%20%20%20%20%20%20%20width%20%3D%20widthEl(actual.id)%20%2B%2020%3B%20%0D%0A%20%20%20%20%20%20%20%20height%20%3DheightEl(actual.id)%20%2B%202%3B%20%0D%0A%20%20%20%20%20%20%20%20if(width%20%3C%20100)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20width%20%3D%20150%3B%20%0D%0A%20%20%20%20%20%20%20%20if(height%20%3C%2040)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20actual.innerHTML%20%3D%20%22%3Cinput%20id%3D%5C%22%22%2B%20actual.id%20%2B%22_field%5C%22%20style%3D%5C%22width%3A%20%22%2Bwidth%2B%22px%3B%20height%3A%20%22%2Bheight%2B%22px%3B%5C%22%20maxlength%3D%5C%22254%5C%22%20type%3D%5C%22text%5C%22%20value%3D%5C%22%22%20%2B%20actual.innerHTML%20%2B%20%22%5C%22%20onkeypress%3D%5C%22return%20fieldEnter(this%2Cevent%2C'%22%20%2B%20actual.id%20%2B%20%22')%5C%22%20onfocus%3D%5C%22highLight(this)%3B%5C%22%20onblur%3D%5C%22noLight(this)%3B%20return%20fieldBlur(this%2C'%22%20%2B%20actual.id%20%2B%20%22')%3B%5C%22%20%2F%3E%22%3B%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20actual.innerHTML%20%3D%20%22%3Ctextarea%20name%3D%5C%22textarea%5C%22%20id%3D%5C%22%22%2B%20actual.id%20%2B%22_field%5C%22%20style%3D%5C%22width%3A%20%22%2Bwidth%2B%22px%3B%20height%3A%20%22%2Bheight%2B%22px%3B%5C%22%20onfocus%3D%5C%22highLight(this)%3B%5C%22%20onblur%3D%5C%22noLight(this)%3B%20return%20fieldBlur(this%2C'%22%20%2B%20actual.id%20%2B%20%22')%3B%5C%22%3E%22%20%2B%20actual.innerHTML%20%2B%20%22%3C%26%2347textarea%3E%22%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20changing%20%3D%20true%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20actual.firstChild.focus()%3B%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0A%2F%2Ffind%20all%20span%20tags%20with%20class%20editText%20and%20id%20as%20fieldname%20parsed%20to%20update%20script.%20add%20onclick%20function%20%0D%0Afunction%20editbox_init()%7B%20%0D%0A%20%20%20%20if%20(!document.getElementsByTagName)%7B%20return%3B%20%7D%20%0D%0A%20%20%20%20var%20spans%20%3D%20document.getElementsByTagName(%22span%22)%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%20loop%20through%20all%20span%20tags%20%0D%0A%20%20%20%20for%20(var%20i%3D0%3B%20i%3Cspans.length%3B%20i%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20spn%20%3D%20spans%5Bi%5D%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20((('%20'%2Bspn.className%2B'%20').indexOf(%22editText%22)%20!%3D%20-1)%20%26%26%20(spn.id))%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20spn.onclick%20%3D%20function%20()%20%7B%20cambia(this)%3B%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20spn.style.cursor%20%3D%20%22pointer%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20spn.title%20%3D%20%22Click%20to%20edit!%22%3B%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%2F%2Fcrossbrowser%20load%20function%20%0D%0Afunction%20addEvent(elm%2C%20evType%2C%20fn%2C%20useCapture)%20%0D%0A%7B%20%0D%0A%20%20if%20(elm.addEventListener)%7B%20%0D%0A%20%20%20%20elm.addEventListener(evType%2C%20fn%2C%20useCapture)%3B%20%0D%0A%20%20%20%20return%20true%3B%20%0D%0A%20%20%7D%20else%20if%20(elm.attachEvent)%7B%20%0D%0A%20%20%20%20var%20r%20%3D%20elm.attachEvent(%22on%22%2BevType%2C%20fn)%3B%20%0D%0A%20%20%20%20return%20r%3B%20%0D%0A%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20alert(%22Please%20upgrade%20your%20browser%20to%20use%20full%20functionality%20on%20this%20page%22)%3B%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2Fget%20width%20of%20text%20element%20%0D%0Afunction%20widthEl(span)%7B%20%0D%0A%0D%0A%20%20%20%20if%20(document.layers)%7B%20%0D%0A%20%20%20%20%20%20w%3Ddocument.layers%5Bspan%5D.clip.width%3B%20%0D%0A%20%20%20%20%7D%20else%20if%20(document.all%20%26%26%20!document.getElementById)%7B%20%0D%0A%20%20%20%20%20%20w%3Ddocument.all%5Bspan%5D.offsetWidth%3B%20%0D%0A%20%20%20%20%7D%20else%20if(document.getElementById)%7B%20%0D%0A%20%20%20%20%20%20w%3Ddocument.getElementById(span).offsetWidth%3B%20%0D%0A%20%20%20%20%7D%20%0D%0Areturn%20w%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2Fget%20height%20of%20text%20element%20%0D%0Afunction%20heightEl(span)%7B%20%0D%0A%0D%0A%20%20%20%20if%20(document.layers)%7B%20%0D%0A%20%20%20%20%20%20h%3Ddocument.layers%5Bspan%5D.clip.height%3B%20%0D%0A%20%20%20%20%7D%20else%20if%20(document.all%20%26%26%20!document.getElementById)%7B%20%0D%0A%20%20%20%20%20%20h%3Ddocument.all%5Bspan%5D.offsetHeight%3B%20%0D%0A%20%20%20%20%7D%20else%20if(document.getElementById)%7B%20%0D%0A%20%20%20%20%20%20h%3Ddocument.getElementById(span).offsetHeight%3B%20%0D%0A%20%20%20%20%7D%20%0D%0Areturn%20h%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20highLight(span)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20span.parentNode.style.border%20%3D%20%222px%20solid%20%23D1FDCD%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20span.parentNode.style.padding%20%3D%20%220%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20span.style.border%20%3D%20%221px%20solid%20%2354CE43%22%3B%20%20%20%20%20%20%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20noLight(span)%7B%20%0D%0A%20%20%20%20%20%20%20%20span.parentNode.style.border%20%3D%20%220px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20span.parentNode.style.padding%20%3D%20%222px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20span.style.border%20%3D%20%220px%22%3B%20%20%20%20%20%20%20%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%2F%2Fsets%20post%2Fget%20vars%20for%20update%20%0D%0A%0D%0Afunction%20setVarsForm(vars)%7B%20%0D%0A%20%20%20%20formVars%20%20%3D%20vars%3B%20%0D%0A%7D%20%0D%0A%0D%0AaddEvent(window%2C%20%22load%22%2C%20editbox_init)%3B%20%0D%0A%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0AsetVarsForm(%22pageID%3DprofileEdit%26userID%3D11%26sessionID%3D28ydk3478Hefwedkbj73bdIB8H%22)%3B%20%0D%0A%3C%2Fscript%3E"> 
<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需刷新才能执行]

教程首页更多教程