在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。

我在网上查了很多资料，但都有一个小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实现双击内容变为可编辑状态的更多相关文章

  1. 点击编辑table变为可编辑状态

    简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~ 思路:用一个带有input的表去替换不带inp ...

  2. js动态实现文本框不可编辑状态

    两种方法: $("#id").attr("readOnly",false); 不可编辑,可以传值 $("#id").attr("d ...

  3. JTable只要一双击就进入编辑状态,禁止的方法实现

    我用JTable做了一个表格,表格内容只供查看和选择,可每次只要一双击,就进入编辑状态,可是现在我不需要当双击的时候修改表格的内容.这时候需要重载isCellEditable方法. 下面是我的实现的代 ...

  4. 请教 JTable 里的单元格如何使得双击进入单元格后，单元格的内容处于全选中状态

    http://bbs.csdn.net/topics/390195204 ———————————————————————————————————————— java 达人, 最近在开发一个 java  ...

  5. 解除网页右键限制和开启网页编辑状态的js代码

    当访问页面右键被限制了怎么办?很好办!将以下代码添加进收藏夹,点击执行即可: javascript:alert(document.onselectstart = document.onbeforeco ...

  6. js实现复制内容到剪切板，兼容pc和手机端，支持Safari浏览器

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

  7. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  8. iOS开发UI篇-tableView在编辑状态下的批量操作(多选)

    先看下效果图 直接上代码 #import "MyController.h" @interface MyController () { UIButton *button; } @pr ...

  9. DataGridView的DataGridViewComboBoxColumn列点击一次，自动处于编辑状态

    本文转载:http://www.cnblogs.com/Johnny_Z/archive/2012/02/12/2348235.html Winform中的DataGridView数据绑定控件有时会用 ...

随机推荐

  1. shell(2)-&& 与 || 逻辑或与非

    test 命令测试 -常见的测试类型–测试文件状态–字符串比较–整数值比较–逻辑测试&& 如果是“前面”(真),则“后面”[ -f /var/run/dhcpd.pid ] & ...

  2. Python--Django学习笔记2

    本篇介绍Django中的Model层. 首先介绍sqlite3,这是在当前版本中Django默认使用的数据库,sqlite也是Android中所使用的数据库. 接着介绍最最最常见的MySQL数据库如何 ...

  3. AutoCompleteTextView和自定义的CursorAdapter

    用雅虎天气接口和AutoCompleteTextView开发天气应用(1) 2014/03/20 | 分类: ANDROID, 开发 | 2 条评论 | 标签: 天气, 安卓开发 分享到:5 jQue ...

  4. POSIX 线程取消点的 Linux 实现

    http://blog.csdn.net/stevenliyong/article/details/4364039 原文链接:http://blog.solrex.cn/articles/linux- ...

  5. circRNA

    一.circRNA序列提取 环状RNA (circRNA)是一类不具有 5' 末端帽子和 3' 末端 poly(A)尾巴.并以共价键形成环形结构的非编码 RNA 分子. 环状RNA (circRNA) ...

  6. GO语言的进阶之路-Golang字符串处理以及文件操作

    GO语言的进阶之路-Golang字符串处理以及文件操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们都知道Golang是一门强类型的语言,相比Python在处理一些并发问题也 ...

  7. php脚本#!/usr/bin/env php 写法

    脚本语言的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它. 比如php脚本的第一行可以写成如下几种格式 #!/usr/bin/php #!/usr/bin/env php # ...

  8. 学习windows编程 day3 之 自定义画笔的两种方法

    LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { HDC hdc; PAINTSTRU ...

  9. Linux记录-TCP状态以及（TIME_WAIT/CLOSE_WAIT）分析（转载）

    1.TCP握手定理 2.TCP状态 l  CLOSED:初始状态,表示TCP连接是“关闭着的”或“未打开的”. l  LISTEN :表示服务器端的某个SOCKET处于监听状态,可以接受客户端的连接. ...

  10. Spring session(redis存储方式)监听导致创建大量redisMessageListenerContailner-X线程

    待解决的问题 Spring session(redis存储方式)监听导致创建大量redisMessageListenerContailner-X线程 解决办法 为spring session添加spr ...