技术文栏浏览文章直接双击页面元素进行修改的实现乔客网 - 乔客官方网站 CMS ASP内容管理系统 ASP网站管理系统我们专注于会员互动!

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>直接双击页面元素进行修改的HTML代码</title>
06.<script type="text/javascript">
07.function ShowElement(element)
08.{
09.    var oldhtml = element.innerHTML;   //获得元素之前的内容
10.    var newobj = document.createElement(''input'');   //创建一个input元素
11.    newobj.type = ''text'';   //为newobj元素添加类型
12.    newobj.value=oldhtml;
13.    element.innerHTML = '''';   //设置元素内容为空
14.    element.appendChild(newobj);   //添加子元素
15.
16.    newobj.focus();   //获得焦点
17.    newobj.onfocus = function()
18.    {
19.        element.ondblclick='''';//取消元素的双击事件
20.    }
21.    //设置newobj失去焦点的事件
22.    newobj.onblur = function()
23.    {
24.        element.innerHTML = this.value ? this.value : oldhtml;   //当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml
25.        element.ondblclick = function()//还原元素的双击事件
26.        {
27.            ShowElement(this);
28.        }
29.    }
30.}
31.</script>
32.</head>
33.
34.<body>
35.<dl>
36.  <dt>用户名：</dt>
37.  <dd ondblclick="ShowElement(this)">小草</dd>
38.  <dt>个人宣言</dt>
39.  <dd ondblclick="ShowElement(this)">这家伙很懒，什么也没留下！</dd>
40.</dl>
41.</body>
42.</html>