JS实现双击内容变为可编辑状态
在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。
我在网上查了很多资料，但都有一个小bug，就是当获取焦点后，光标的位置在文本框内容是开始处，这样编辑时还需要用户再重新选择一下光标位置，这样的交互感觉不好；后来查到新的资料解决了此问题，希望可以帮助到更多的人。 代码部分： 注意：设置选择文本的内容或设置光标位置 <!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=utf-8" />
<script type="text/javascript">
function ShowElement(element) {
var oldhtml = element.innerHTML;
//创建新的input元素
var newobj = document.createElement('input');
//为新增元素添加类型
newobj.type = 'text';
//为新增元素添加value值
newobj.value = oldhtml;
//为新增元素添加光标离开事件
newobj.onblur = function() {
element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
//当触发时判断新增元素值是否为空，为空则不修改，并返回原有值
}
//设置该标签的子节点为空
element.innerHTML = '';
//添加该标签的子节点，input对象
element.appendChild(newobj);
//设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
newobj.setSelectionRange(0, oldhtml.length);
//设置获得光标
newobj.focus(); }
</script>
</head>
<body>
<dl>
<dt>你的用户名:</dt>
<dd ondblclick="ShowElement(this)">三人行</dd>
<dt>你的个性档</dt>
<dd ondblclick="ShowElement(this)">三人行，必有我师焉！</dd>
</dl>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
双击事件：ondblclick
JS实现双击内容变为可编辑状态的更多相关文章
- 点击编辑table变为可编辑状态
简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~ 思路:用一个带有input的表去替换不带inp ...
- js动态实现文本框不可编辑状态
两种方法: $("#id").attr("readOnly",false); 不可编辑,可以传值 $("#id").attr("d ...
- JTable只要一双击就进入编辑状态,禁止的方法实现
我用JTable做了一个表格,表格内容只供查看和选择,可每次只要一双击,就进入编辑状态,可是现在我不需要当双击的时候修改表格的内容.这时候需要重载isCellEditable方法. 下面是我的实现的代 ...
- 请教 JTable 里的单元格如何使得双击进入单元格后，单元格的内容处于全选中状态
http://bbs.csdn.net/topics/390195204 ———————————————————————————————————————— java 达人, 最近在开发一个 java ...
- 解除网页右键限制和开启网页编辑状态的js代码
当访问页面右键被限制了怎么办?很好办!将以下代码添加进收藏夹,点击执行即可: javascript:alert(document.onselectstart = document.onbeforeco ...
- js实现复制内容到剪切板，兼容pc和手机端，支持Safari浏览器
Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
- iOS开发UI篇-tableView在编辑状态下的批量操作(多选)
先看下效果图 直接上代码 #import "MyController.h" @interface MyController () { UIButton *button; } @pr ...
- DataGridView的DataGridViewComboBoxColumn列点击一次，自动处于编辑状态
本文转载:http://www.cnblogs.com/Johnny_Z/archive/2012/02/12/2348235.html Winform中的DataGridView数据绑定控件有时会用 ...
随机推荐
- 【BZOJ2875】【NOI2012】随机数生成器（矩阵快速幂）
[BZOJ2875]随机数生成器(矩阵快速幂) 题面 Description 栋栋最近迷上了随机算法,而随机数是生成随机算法的基础.栋栋准备使用线性同余法(Linear Congruential Me ...
- [luogu3258][JLOI2014]松鼠的新家
题解 我们就在\([a_i,a_{i+1}]\)的路径上都\(+1\),然后单点查询就可以了. ac代码(吸了氧才过的QwQ) # include <bits/stdc++.h> # de ...
- 洛谷 P3962 [TJOI2013]数字根 解题报告
P3962 [TJOI2013]数字根 题意 数字根:这个数字每一位的数字加起来求和,反复这个过程直到和小于10. 给出序列\(a\),询问区间\([l,r]\)连续的子区间里最大前5个不同的数字根, ...
- 【bzoj4818】 Sdoi2017—序列计数
http://www.lydsy.com/JudgeOnline/problem.php?id=4818 (题目链接) 题意 一个长度为$n$的序列,每个元素是不超过$m$的正整数,且这$n$个数的和 ...
- 【uoj291】 ZJOI2017—树状数组
http://uoj.ac/problem/291 (题目链接) 题意 一个写错的树状数组有多大的概率与正常树状数组得出的答案一样. Solution 可以发现这个树状数组维护的是后缀和. 所以二维线 ...
- POJ1163(简单的DP）
题目链接:http://poj.org/problem?id=1163 Description 73 88 1 02 7 4 44 5 2 6 5 (Figure 1) Figure 1 shows ...
- 转载：Windows下stdlib.h与glut.h中exit()函数重复定义的解决方案
最近用到 OpenGL的第三方库Glut,碰到了exit()这个函数在stdlib.h与glut.h两个头文件中重复定义的情况,解决方案如下: 打开glut.h,找到exit()函数定义的地方(144 ...
- Java:返回当前内存信息
今天有个小程序想获得当前系统可用的内存信息,到百度搜索了一下,看到很多人都在说要采用JNI来做,JAVA本身没办法实现,经过半个多小时的搜索,终于找到了,原来Java本身已经有这个功能了.唉,看来是很 ...
- python数据类型(二)
跟着慕课网练习的,一些简单的知识点如下
- yolo3的改变
转自:https://zhuanlan.zhihu.com/p/35394369 YOLOv3的前世今生 2013年,R-CNN横空出世,目标检测DL世代大幕拉开. 各路豪杰快速迭代,陆续有了SPP, ...