今天在写一个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. 【Linux】shell学习之sed

    sed替换命令 使用该命令,可以将特定字符串或匹配的规则表达式用另一个字符串替换. sed 's/88/--/' filename 将filename每行第一次出现的88用字符串--替换,然后将该文件 ...

  2. Oracle 12c新特性之——TABLE ACCESS BY INDEX ROWID BATCHED

    Oracle12c开始,我们在获取SQL语句的执行计划时,也会经常看到"TABLE ACCESS BY INDEX ROWID BATCHED"操作,那么,这个操作到底是什么意思呢 ...

  3. python 多进程练习 调用 os.system命令

    import sys import getopt import os import multiprocessing def list_all_file(path): """ ...

  4. Kali安装教程（VMWare）

    1.下载镜像及相关 1.1下载镜像文件 下载链接:https://www.kali.org/downloads/ 选择自己需要的版本下载,根据经验先下载种子文件(torrent)再用迅雷下载网速是最有 ...

  5. Win10系列：VC++绘制几何图形4

    三角形绘制完成以后,接下来介绍如何给项目添加主入口函数.打开D2DBasicAnimation.h头文件,添加如下的代码定义一个DirectXAppSource类. //定义类DirectXAppSo ...

  6. xadmin后台分段导出避免timeout

    一.问题 xadmin后台功能很强大,特别在导出的时候格式有xls/xlsx.csv.xml.json.实际常用的还是前面2种.xls格式使用的xlwt,有个缺陷,导出数据过大时,会报ValueErr ...

  7. Linux运维工程师需要掌握什么才能胜任工作呢

    万丈高楼平地起,所有一切的高深的技术都离不开最基本的技术,那么作为运维工程师的你,什么是最基本的技术呢,毫无疑问是Linux,Linux 是你所有一切技术的根源,试想一下如果你连基础的操作命令都不知道 ...

  8. 【资料收集】PCA降维

    重点整理: PCA(Principal Components Analysis)即主成分分析,是图像处理中经常用到的降维方法 1.原始数据: 假定数据是二维的 x=[2.5, 0.5, 2.2, 1. ...

  9. java 实现简单链式队列

    package com.my; /** * 链式队列 * @author wanjn * */ public class LinkedQueue { private Node head; privat ...

  10. 用Python的导入csv、文本文件、Excel文件的数据

    使用read_csv函数导入CSV文件 read.csv函数语法 read_csv(file,encoding) 例子: Age,Name 22,wangwei 23,lixin 24,liqing ...