今天在写一个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. MSSQL索引视图（indexed view）之简述及使用

    乍一听到这个名字,可能感到有点陌生,这个对象是干嘛的呢?原理是什么?不用着急,我们看看下面的内容,慢慢就明白了.顾名思义,索引视图就是建有索引的视图,这是MSSQL提供的一项技术,用于提升某些SQL语 ...

  2. Units about ASM

    1.ASM Striping and Mirroring:ASM supports two levels of striping: fine striping and coarse striping. ...

  3. 【转】jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

  4. ScheduledThreadPoolExecutor

    java提供了方便的定时器功能,代码示例: public class ScheduledThreadPool_Test { static class Command implements Runnab ...

  5. element-ui 表格翻页多选，数据回显

    reserve-selection与row-key结合 <el-table :data="pageData" ref="goodsTable" size= ...

  6. linux查看主机最后启动时间

    1.使用who查看最后重启时间 who -b 2.使用last查看近几次重启时间 last reboot 第一条即为最后一次重启日期 last其实是查询用户的登录记录,reboot是一个伪用户:也就是 ...

  7. Bluedroid: 音频数据的传输流程

    一. UIPC:   Audio Flinger获取到a2dp的hw module,然后蓝牙协议栈有专用于发送和接收media数据的线程,名称:btif_media_task.   蓝牙与Audio的 ...

  8. 深入理解java虚拟机---java虚拟机内存管理(六)

    java虚拟机栈的理解 虚拟机栈就是我们所熟知的栈内存,栈内存属于线程独有的.而在栈内存中的局部变量表中存储的引用类型只是存储对象的内存地址.对象的创建在堆内存中,即对象在线程共享区中. 局部变量表: ...

  9. ３.4 C++名字隐藏

    参数:http://www.weixueyuan.net/view/6361.html 总结: 如果派生类中新增一个成员变量,该成员变量与基类中的成员变量同名,则新增的成员变量就会遮蔽从基类中继承过来 ...

  10. 杭电多校第七场 1010 Sequence（除法分块+矩阵快速幂）

    Sequence Problem Description Let us define a sequence as below f1=A f2=B fn=C*fn-2+D*fn-1+[p/n] Your ...