JS实现双击编辑可修改
需求描述:在一段文字处双击可以进行修改,也就是双击后创建输入框,输入内容,在输入框失去焦点后将输入的内容再以文字的形式显示出来,以下是html代码:

1 <fieldset>
2 <legend>双击用户名进行编辑</legend>
3 <dl>
4 <dt>你的用户名:</dt>
5 <dd ondblclick="ShowElement(this)">诸葛亮</dd>
6 </dl>
7 </fieldset>

以下是摘录的JavaScript代码:

1 <script type="text/javascript">
2 function ShowElement(element) {
3 var oldhtml = element.innerHTML;
4 //创建新的input元素
5 var newobj = document.createElement('input');
6 //为新增元素添加类型
7 newobj.type = 'text';
8 //为新增元素添加value值
9 newobj.value = oldhtml;
10 //为新增元素添加光标离开事件
11 newobj.onblur = function() {
12 element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
13 //当触发时判断新增元素值是否为空,为空则不修改,并返回原有值
14 }
15 //设置该标签的子节点为空
16 element.innerHTML = '';
17 //添加该标签的子节点,input对象
18 element.appendChild(newobj);
19 //设置选择文本的内容或设置光标位置(两个参数:start,end;start为开始位置,end为结束位置;如果开始位置和结束位置相同则就是光标位置)
20 newobj.setSelectionRange(0, oldhtml.length);
21 //设置获得光标
22 newobj.focus();
23
24 }
25 </script>

这里存在一个小问题,就是当已经双击一次的情况下,input已存在,再次双击,会出现input的内容被替换为上次双击的input的html代码。
解决方案是判断是否已存在input标签,如果存在,直接return,不做任何操作。
以下是修改后的Js代码:

1 <script type="text/javascript">
2 function ShowElement(element) {
3 var oldhtml = element.innerHTML;
4 //如果已经双击过,内容已经存在input,不做任何操作
5 if(oldhtml.indexOf('type="text"') > 0){
6 return;
7 }
8 //创建新的input元素
9 var newobj = document.createElement('input');
10 //为新增元素添加类型
11 newobj.type = 'text';
12 //为新增元素添加value值
13 newobj.value = oldhtml;
14 //为新增元素添加光标离开事件
15 newobj.onblur = function() {
16 element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
17 //当触发时判断新增元素值是否为空,为空则不修改,并返回原有值
18 }
19 //设置该标签的子节点为空
20 element.innerHTML = '';
21 //添加该标签的子节点,input对象
22 element.appendChild(newobj);
23 //设置选择文本的内容或设置光标位置(两个参数:start,end;start为开始位置,end为结束位置;如果开始位置和结束位置相同则就是光标位置)
24 newobj.setSelectionRange(0, oldhtml.length);
25 //设置获得光标
26 newobj.focus();
27
28 }
29 </script>

JS实现双击编辑可修改的更多相关文章
- JS实现双击内容变为可编辑状态
在一些网站上我们经常看到交互性很强的功能.一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等.. 我在网上查了很多资料,但都有一个小bug,就是当获取焦点后,光标的位置 ...
- JQUERY、AJAX双击DIV,直接修改DIV内的内容
最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是自己动手写…… 最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值, ...
- 如何禁用 FastAdmin 双击编辑功能?
如何禁用 FastAdmin 双击编辑功能? 新版 (1.0.0.20180513_beta)增加一个新功能,可以禁止双击编辑. 很多人还是喜欢双击选中复制,默认的双击编辑还是不怎么习惯. 可以以下文 ...
- 基于svg.js实现可编辑的图像
svg.js的git地址https://github.com/svgdotjs/svg.js 实现可以拖动,可双击编辑,可拖动改变长短,线条可旋转以及一个可点击改变大小,可更改内容的二维码. 首先引入 ...
- 零基础学习java------35---------删除一个商品案例,删除多个商品,编辑(修改商品信息),校验用户名是否已经注册(ajax)
一. 删除一个商品案例 将要操作的表格 思路图 前端代码 <%@ page language="java" contentType="text/html; cha ...
- ArcGIS学习记录—属性表的编辑与修改
原文地址: ArcGIS问题:属性表的编辑与修改 - Silent Dawn的日志 - 网易博客 http://gisman.blog.163.com/blog/static/344933882009 ...
- js实现class样式的修改、添加及删除的方法
本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: <t ...
- js实现双击后网页自己主动跑-------Day55
公司的界面设计环节总算是告一段落了,必需要承认的是,这段时间晚间的学习带给我非常多益处.在工作中偶尔的应用,效果出奇的好,收到领导和同事的一些小赞扬,表示非常欣慰,也长了点不少自信,尽管不理解,他们这 ...
- JS和Jquery获取和修改label的值的示例代码
abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源: < JS和Jquery获取和修改label的值的示例代码 & ...
随机推荐
- ABAP术语-Function Library
Function Library 原文:http://www.cnblogs.com/qiangsheng/archive/2008/02/14/1068642.html Central reposi ...
- Python序列删除重复数据
## 对于列表来说,若不保持原有顺序,可以直接转换为set删除重复数据 nums = [1,2,32,2,2,4,3,2,3,42] nums = list(set(nums)) print(nums ...
- linux 用户 用户组
useradd -m -G sudo zhangxiao passwd zhangxiao
- python3爬虫之开篇
写在前面的话: 折腾爬虫也有一段时间了,从一开始的懵懵懂懂,到现在的有一定基础,对于这一路的跌跌撞撞,个人觉得应该留下一些文字性的东西,毕竟好记性不如烂笔头,而且毕竟这是吃饭的家伙,必须用心对待才可以 ...
- (数据科学学习手札03)Python与R在随机数生成上的异同
随机数的使用是很多算法的关键步骤,例如蒙特卡洛法.遗传算法中的轮盘赌法的过程,因此对于任意一种语言,掌握其各类型随机数生成的方法至关重要,Python与R在随机数底层生成上都依靠梅森旋转(twiste ...
- 【转】使用git提交项目到码云
一.git安装 1.首先在官方网站下载git工具,或者根据以下链接进行下载:http://download.csdn.net/detail/qq_27501889/9788879(此链接版本为git- ...
- 2016.01.04接触spring一年开始读spring源码
http://www.cnblogs.com/xing901022/p/4178963.html#_label0 遇到第一个问题The processing instruction target ma ...
- 最后一片蓝海的终极狂欢-写在Win10发布前夕
作为一名Windows8.x+系统平台从业者,从工作伊始,耳边不断充斥着Windows将走向没落的言论,Win10今日晚些时候即将发布,笔者借此机会,说说自己的看法. 早在2012年的时候,IDC曾预 ...
- 【APUE】Chapter16 Network IPC: Sockets & makefile写法学习
16.1 Introduction Chapter15讲的是同一个machine之间不同进程的通信,这一章内容是不同machine之间通过network通信,切入点是socket. 16.2 Sock ...
- Web框架本质及浅谈HTTP协议
Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...