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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
原生js实现随机点名
Jul 05 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
php写的简易聊天室代码
2011/06/04 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python 求10个数的平均数实例
2019/12/16 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
Python过滤序列元素的方法
2020/07/31 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
大整数数相乘的问题
2012/07/22 面试题
医疗器械售后服务承诺书
2014/05/21 职场文书
超越自我演讲稿
2014/05/21 职场文书
个人自荐材料
2014/05/23 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
城管年度个人总结
2015/02/28 职场文书
公司财务部岗位职责
2015/04/14 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js