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

鬼中飞懿

鬼中飞懿

2016-02-19 15:51

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐直接双击页面元素进行修改的HTML代码,无聊中的都看过来。

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

  注意代码中加粗部分。

!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=utf-8" /
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://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

直接将HTML页面打印页面的设计

Web开发
直接将HTML页面打印页面的设计

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

动态生成页面元素的代码

Web开发
动态生成页面元素的代码

规范HTML代码可以节省修改代码的时间

Web开发
规范HTML代码可以节省修改代码的时间

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用JavaScript保存HTML页面中元素

Web开发
用JavaScript保存HTML页面中元素

在 HTML 页面中添加 VBScript 代码

Web开发
在 HTML 页面中添加 VBScript 代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript 实现ALT标签中显示图片

JavaScript 实现ALT标签中显示图片

高手帮你电脑没有声音的问题

高手帮你电脑没有声音的问题
下拉加载更多内容 ↓