直接双击页面元素进行修改的HTML代码

在腾讯空间和一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。

这些功能看似较难，其实实现起来很简单，只需几行代码就可实现。希望对一些新手有所帮助，高手请飘过~

注意代码中加粗部分。

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 直接双击页面元素进行修改的HTML代码 </ title >
< script  type ="text/javascript" >
function  ShowElement(element)
{
     var  oldhtml  =  element.innerHTML;    // 获得元素之前的内容
     var  newobj  =  document.createElement( ' input ' );    // 创建一个input元素
    newobj.type  =   ' text ' ;    // 为newobj元素添加类型
    
     // 设置newobj失去焦点的事件
    newobj.onblur  =   function (){
        element.innerHTML  =   this .value  ?   this .value : oldhtml;    // 当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml。
        }
    element.innerHTML  =   '' ;    // 设置元素内容为空
    element.appendChild(newobj);    // 添加子元素
    
    newobj.focus();    // 获得焦点
}
</ script >
</ head >

< body >
< dl >
   < dt > 用户名： </ dt >
   < dd  ondblclick ="ShowElement(this)" > 笨笨狼 </ dd >
   < dt > 个人宣言 </ dt >
   < dd  ondblclick ="ShowElement(this)" > 这家伙很懒，什么也没留下！ </ dd >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/project/archive/2011/08/02/2124450.html