文档章节

通过js实现单击或双击直接修改内容

 薄荷味
发布于 2016/03/31 10:45
字数 614
阅读 24
收藏 0

代码并不重要,关键是思路,这里简要说一下:

    1.展示的时候直接将内容展示在文本框中,文本框的边框设置为0,也可以在设置一下readonly,这样在展示到页面上的时候给人一种普通文本的假象,实际是显示在边框为0的文本框中,给文本框加单击或者双击事件,触发时将边框更改为1,并且去掉readonly属性,这样就可以修改了,同时也要有失去焦点事件,失去焦点时通过ajax将相应的数据发送到服务器端进行修改,修改成功文本框恢复原状。这种方式给用户一种假象,有时体验不太好,比如设置双击触发事件,而单击时就会出现光标(虽然有readonly不能改)。下面再说一种方式。

    2.展示的时候内容直接展示在一些容器类标签中例如<span>标签,单击或双击时同样触发事件,将内容更改为文本框,并且将是原来容器中的内容作为文本框中的value,设置失去焦点事件,当失去焦点时触发事件通过ajax实现修改,并且再将文本框的位置替换为修改后的内容,当然还有一些细节,比如没有做任何修改的情况下失去焦点,这样就不应该发送数据到服务器端了。给出代码如下:

<!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>(单击)双击直接修改内容的代码</title>

<script type="text/javascript">

function edit(element){

 var oldhtml = element.innerHTML;//获得元素之前的内容
 var newobj = document.createElement('input');//创建一个input元素
 newobj.type = 'text';//为newobj元素添加类型
  newobj.value=oldhtml;
 element.innerHTML = '';   //设置元素内容为空
 element.appendChild(newobj);//添加子元素
 newobj.focus();//获得焦点
  //设置newobj失去焦点的事件
 newobj.onblur = function(){
   //下面应该判断是否做了修改并使用ajax代码请求服务端将id与修改后的数据提交
   alert(element.id);
      //当触发时判断newobj的值是否为空,为空则不修改,并返回oldhtml
      element.innerHTML = this.value ? this.value : oldhtml;
   }
}
</script>

</head>
<body>

 姓名:<span id="1" ondblclick="edit(this)">张三</span><br/>
 家庭住址:<span id="2" ondblclick="edit(this)">张三</span><br/>

</body>

</html>

© 著作权归作者所有

薄荷味

粉丝 0
博文 30
码字总数 6590
作品 0
海淀
私信 提问
前端基础-JavaScript

开发工具与关键技术:DW/浏览器 ;简单使用js。 作者:刘佳明 撰写时间:2019年1月 18 日 前面已经随手写过了关于网页编辑的一些基础布局和标签的认识;这篇文章在这里为大家简单的介绍一下关...

没有,
01/18
0
0
React Native / React调试技巧

React Native / React调试技巧 做过原生APP开发的同学们都清楚,我们在Xcode和studio中就可以直接对编写的代码进行断点调试,很方便,但是web开发断点调试就不能直接在开发工具中完成了,需要...

光强
2018/09/12
0
0
实现在任何有网络的地方把群晖NAS虚拟成本地硬盘的WEBDAV教程

首先在群晖NAS套件中心搜索并安装WEBDAV Server 套件 安装好打开设置 端口可自定义 按应用 下载安装好netdrive 1、下载解压好安装包,双击运行里面的:“NetDrive2Setup2616962.exe”主程序,...

晚上的太阳
2018/08/22
0
0
教你如何在博客园放“可运行"代码

自从看到别人的博客可以放上面那种可运行的代码后,我一直在研究这种效果是怎么弄出来的,我知道蓝色理想上面可以在编辑器里直接将代码放进一个可运行的代码框,发布后就是可运行的了。但博客...

蜗牛奔跑
2015/06/26
0
1
【Cocos2d教程】Cocos2d-x--安装程序步骤及.js脚本引擎问题

1.安装前需准备VS2008或VS2010安装包,cocos2D-x安装包   VS2008下载:http://www.97sky.cn/soft/9916.html   cocos2d-x下载:http://cocos2d-x.googlecode.com/files/cocos2d-1.0.1-x-0......

cocos2dl
2014/02/13
2.1K
1

没有更多内容

加载失败,请刷新页面

加载更多

AOP的学习(1)

AOP 理解AOP编程思想(面向方法、面向切面) spring AOP的概念 方面 -- 功能 目标 -- 原有方法 通知 -- 对原有方法增强的方法 连接点 -- 可以用来连接通知的地方(方法) 切入点 -- 将用来插入...

太猪-YJ
23分钟前
2
0
一张图看懂亮度、明度、光度、光亮度、明亮度

亮度、明度、光亮度,Luminance和Brightness、lightness其实都是一个意思,只是起名字太难了。 提出一个颜色模型后,由于明度的取值与别人的不同,为了表示区别所以就另想一个词而已。 因此在...

linsk1998
昨天
3
0
Python应用:python链表示例

前言 python链表应用源码示例,需要用到python os模块方法、函数和类的应用。 首先,先简单的来了解下什么是链表?链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是...

python小白1
昨天
3
0
Source Insight加载源码

Source Insight是一个图形化的源代码查看工具(当然也可以作为编译工具)。如果一个项目的源代码较多,此工具可以很方便地查找到源代码自建的依赖关系。 1.创建工程 下图为Snort源代码的文件...

天王盖地虎626
昨天
3
0
nginx-rtmp-module的缺陷分析(二)

nginx-rtmp-module使用指令push和pull来relay媒体流数据,以便分布式部署服务。 当nginx-rtmp-module作为边缘服务器(一般不会向边缘服务器推流)时,使用pull从源服务器获取媒体流数据,俗称...

YoungSagit
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部