欢迎来到代码驿站！

JavaScript代码

当前位置：首页 > 网页前端 > JavaScript代码

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

时间：2021-09-09 09:53:08|栏目：JavaScript代码|点击：次

<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+CSS

栏目：JavaScript代码

下一篇：微信小程序修改数组长度的问题的解决

本文标题：实时编辑网页网页文字实时编辑，如同TEXTBOX一般

本文地址：http://www.codeinn.net/misctech/173838.html

更多JavaScript代码

阅读排行

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

联系QQ：914707363 | 邮箱：codeinn#126.com(#换成@)

Copyright © 2020 代码驿站版权所有