今天在写一个todolist待办事项项目，需要单击编辑待办事项的内容，百度搜了一下这几个方法的用法，总结一下

focus()方法：获得键盘焦点，单击之后就调用绑定的js方法，在span标签里面加一个输入框，然后进行编辑

onblur()方法：失去键盘焦点，编辑结束之后，随意鼠标单击任意地方更新编辑的内容

setSelectionRange():js控制输入框光标位置

这三个方法组合起来可以用做鼠标点击事件，然后进行内容编辑，内容编辑时使用setSelectionRange()选中所有文本，就可以不需要一个一个删除了

<body>

    <span id="s1" onclick="change()">这是一段文本</span>

    <script>

        function change() {

            var span = document.getElementById('s1');

            var conent = span.innerHTML;

            span.innerHTML = "<input id='input' value='"+conent+"'/>";

            var input = document.getElementById('input');

            input.setSelectionRange(0,input.value.length);

            input.focus();//获得键盘焦点

            input.onblur = function () {//失去键盘焦点

                span.innerHTML = input.value;//更改span的文本内容

            }

        }

    </script>

</body>

JavaScript中HTML DOM focus()与onblur() setSelectionRange()用法的更多相关文章

  1. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  2. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  3. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  4. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  5. JavaScript中常见的数组操作函数及用法

    JavaScript中常见的数组操作函数及用法 昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下 ...

  6. JavaScript中常见的字符串操作函数及用法

    JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...

  7. 博文推荐】Javascript中bind、call、apply函数用法

    [博文推荐]Javascript中bind.call.apply函数用法 2015-03-02 09:22 菜鸟浮出水 51CTO博客 字号:T | T 最近一直在用 js 写游戏服务器,我也接触 j ...

  8. 在JavaScript中闭包的作用和简单的用法

    在JavaScript中闭包的作用和简单的用法 一.闭包的简介 作用域链:在js中只有函数有作用域的概念,由于函数内能访问函数外部的数据,而函数外部不能访问函数内部的数据,由上述形成一种作用域访问的链 ...

  9. JavaScript中的DOM及相关操作

    一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...

随机推荐

  1. zzw原创_根据某一文件复制出大量固定位数后缀名的递增的文件

    1.trre.sh   :根据某一文件复制出大量固定位数后后缀递增的文件.   如将 SPINFO_190516_20170109.001 复制成SPINFO_190516_20170109.002  ...

  2. js修改样式

    添加.删除class: $("#id").addClass("someClass"); $("#id").removeClass(" ...

  3. img 标签

    设计网页时经常使用的图片有三种,它们的相同点是都经过了压缩,压缩比越高,图像品质越差. GIF(Graphics Interchange Format):最多支持256色,支持透明,支持多帧动画显示效 ...

  4. Java语言中的值传递与引用传递

    Java应用程序中永远不会传递对象,而只会传递对象应用,因此,按对象引用传递. (1)      Int作为参数传递时,对形参值得修改不会影响到实参: (2)      StringBuffer作为参 ...

  5. How to calculate bits per character of a string? (bpc) to read

      http://stackoverflow.com/questions/17797922/how-to-calculate-bits-per-character-of-a-string-bpc up ...

  6. laravel中的plicy授权方法：

    1.用命令新建policy: php artisan make:policy PostPolicy 2.在app/Policies/PostPolicy.php中添加处理文件的权限的方法: //修改: ...

  7. shell 文件条件判断

    按照文件类型进行判断 '-b 文件' 判断该文件是否存在,并且是否为块设备文件(是块设备文件为真) '-c 文件' 判断该文件是否存在,并且是否为字符设备文件(是字符设备文件为真) '-d 文件' 判 ...

  8. ie浏览器get url返回404问题

    昨晚同事说之前给的接口不能get方式的,直接在ie浏览器访问返回404,说明是参数有问题. 同样的接口使用curl和postman请求都正常,其他ie之外的浏览器也都正常响应. 记录下排查过程: 问题 ...

  9. 使用X-UA-Compatible来设置IE8兼容模式

    使用X-UA-Compatible来设置IE8兼容模式 本文向大家描述一下如何使用X-UA-Compatible来设置IE8兼容模式,X-UA-Compatible是针对IE8兼容模式,X-UA-Co ...

  10. 深入理解java虚拟机---lanmbda表达式简介(三)

    1.lanmbda表达式使用  lanbmda表达式的作用: A: 取代内部类 B;增加对集合的操作,从而增强其性能