实时编辑网页网页文字实时编辑，如同TEXTBOX一般- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实时编辑网页网页文字实时编辑，如同TEXTBOX一般

Javascript: Dhtml:浏览大图时鼠标感应控制层滚动条的移动; 初试javascript ：贪吃蛇啊; 只让输入数字的输入框; 只能输入汉字的输入框; 在JS中定义数组删除方法; 在网页中使用realplayer播放rm文件; 用层实现为网页中的图添加水印的效果; 所见即所得编辑器 aynHTML 大全：（一）如何部署、嵌入、装载动态内容; JavaScript 收集的两个小代码！; JScript中正则表达函数的说明与应用; 网页上内容导出到word里; 关于开发在线网页编辑器按回车会输入<p>而不是<br>的解决方法; OOP In JS [JS脚本中的面向对象]; 一个很通用的javascript的下拉菜单; 将金额小写转化成汉字大写; VML Chart 控件; Js+Dhtml:WEB程序员简易开发工具包(预先体验版); Javascript实例教程(21) OLE Automation(4); javascript进行客户端数据的校验; JavaScript 小技巧(第三集)

No. « ‹ 8 9 10 11 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 79 ::

收藏到网摘: n/a

漂亮的提示信息（带箭头）基于逻辑运算的简单权限系统(实现) JS 版

点击运行可以看到效果:

<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>
Message of the day:<strong><span id="messageDay" class="editText">Time Spend Wishing, Is
Time Wasted</span></strong>
<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 版

评论 (0) All