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学习笔记8 用JSON做原型
Jan 11 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
javascript使用call调用微信API
Dec 15 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 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
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
PHP 引用文件技巧
2010/03/02 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
JS出现失效的情况总结
2017/01/20 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
金融管理专业毕业生求职信
2014/03/12 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
成本会计实训报告
2014/11/05 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
详解Nginx 工作原理
2021/03/31 Servers
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
Django rest framework如何自定义用户表
2021/06/09 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python