页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

} 
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 全选提示:你可先修改部分代码,再按运行]

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

百度中搜索更多的关于实时编辑网页网页文字实时编辑，如同TEXTBOX一般内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：用js实现的仿sohu博客更换页面风格（简单版）
下一篇文章：JavaScript的9个陷阱及评点分析

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行