JS实现双击编辑可修改状态的方法


Posted in Javascript onAugust 14, 2015

本文实例讲述了JS实现双击编辑可修改状态的方法。分享给大家供大家参考。具体如下:

这是现在流行的一个表单特效,在网页上单击某文字,文字变为编辑状态,或者是让输入新文字,这就是JavaScript控制表单的一个例子,下面的这段代码就实现了用户名和签名档的双击可编辑功能。

运行效果如下图所示:

JS实现双击编辑可修改状态的方法

在线演示地址如下:

具体代码如下:

<!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>
<title>JS实现双击编辑可修改状态</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript">
function ShowElement(element)
{
var oldhtml = element.innerHTML;
var newobj = document.createElement('input');
//创建新的input元素
newobj.type = 'text';
//为新增元素添加类型
newobj.onblur = function(){
element.innerHTML = this.value ? this.value : 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>
</dl>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
JavaScript变量的作用域全解析
Aug 14 #Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 #Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 #Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 #Javascript
js实现人才网站职位选择功能的方法
Aug 14 #Javascript
jQuery入门基础知识学习指南
Aug 14 #Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 #Javascript
You might like
对盗链说再见...
2006/10/09 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
php PDO异常处理详解
2016/11/20 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
Node.js 基础教程之全局对象
2017/08/06 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
如何使用Python标准库进行性能测试
2019/06/25 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Python读取csv文件实例解析
2019/12/30 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
女性时尚在线:IVRose
2019/02/23 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
红色故事演讲稿
2014/05/22 职场文书
服装发布会策划方案
2014/05/22 职场文书
2014年师德承诺书
2014/05/23 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
医学专业大学生求职信
2014/07/12 职场文书
2015毕业寄语大全
2015/02/26 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
i7 6700处理器相当于i5几代
2022/04/19 数码科技
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL