今天在写一个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. 使用ajax提交form表单，包括ajax文件上传【转载】

    [使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...

  2. 十八、Spring框架（AOP）

    一.AOP(基于XML方式配置AOP) AOP(Aspect Oriented Program):面向切面编程.思想是:把功能分为核心业务功能和周边功能. 所谓核心业务功能:比如登录,增删改数据都叫做 ...

  3. ORA-12537:TNS:connectionclosed错误处理过程

    1.ORA-12537:TNS:connectionclosed错误处理过程 检查监听正常,oracle服务也是正常启动的,但是登录不进去. 2.解决方案 1. cd $ORACLE_HOME/bin ...

  4. [LeetCode] 23. Merge k Sorted Lists ☆☆☆☆☆

    转载:https://leetcode.windliang.cc/leetCode-23-Merge-k-Sorted-Lists.html 描述 Merge k sorted linked list ...

  5. js如何通过末次月经日期计算预产日期

    计算方式有两种 1)直接添加280天 2)添加10月8天(参数传递,可用改成9月7天等) js中引入文件 <script src="js/jquery.min.js"> ...

  6. NiXi.DAY06东软实训.：面向对象思想~抽象~static~final~构造方法及其重载

    本章技能目标: 使用类图描述设计 掌握面向对象设计的基本步骤 掌握类和对象的概念 掌握构造方法及其重载 掌握封装的概念及其使用 本章单词: class:类 object:对象 static: fina ...

  7. linux网络操作 ifconfig命令

    ifconfig 查看已经被激活的网卡详细信息 "ifconfig eth0" 查看特定的网卡信息 [root@ssgao ~]# ifconfig eth0 eth0 Link ...

  8. ROM和RAM区别

    在计算机的组成结构中,有一个很重要的部分,就是存储器.存储器是用来存储程序和数据的部件,对于计算机来说,有了存储器,才有记忆功能,才能保证正常工作.存储器的种类很多,按其用途分为主存储器和辅助存储器, ...

  9. 非图片格式如何转成lmdb格式--caffe

    链接 LMDB is the database of choice when using Caffe with large datasets. This is a tutorial of how to ...

  10. sqlalchemy 简介

    #! /usr/bin/env python3 # -*- coding:utf-8 -*- #use SQLAlchemy #ORM:Object-Relational Mapping ,把关系数据 ...