快捷搜索： 　　nginx
笨牛网>前端开发>网页设计> > 直接双击页面元素进行修改的实现 >

直接双击页面元素进行修改的实现

发布者: AcZKc 围观次 点赞:1
在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。
这些功能看似较难，其实实现起来很简单，只需几行代码就可实现。
Code: 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>
顶(1)
踩(0)
网页设计 网站建设 【搜索相关内容】[打印] [关闭]

您可能还会对下面的文章感兴趣：

相关文章

最新评论