今天在写一个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. 跳转到页面的某个anchor

    var loc = document.location.toString().split('#')[0]; document.location = loc + '#' + anchor;

  2. java项目中登陆时记住密码

    1.在登陆的时候记住密码,不知自动登陆: 2.登陆页面,填写用户名,密码,点击记住密码,下次进入登陆页面的时候,填写同样的用户名,密码自动填充(在不一次会话的情况下也就是说在不关闭浏览器的情况下): ...

  3. Linux查看用户属于哪些组/查看用户组下有哪些用户

    一.关于/etc/group格式的讨论 在说/etc/group格式的时候,网上很多文章都会说是“组名:组密码:组ID:组下用户列表”,这说法对了解/etc/group格式是没问题的,但如果碰到“查看 ...

  4. Windows添加用户和组命令

    查看当前存在用户: net user 查看当前用户组: net localgroup 添加用户(以添加用户ls密码abcd1234为例): net user ls abcd1234 /add 添加用户 ...

  5. Ubuntu安装openssh-server并通过xshell连接

    #安装ssh sudo apt-get install openssh-server openssh-client sudo apt-get update sudo apt-get upgrade 查 ...

  6. shell脚本分析二

    Shell 基本运算符Shell 和其他编程语言一样,支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符原生bash不支持简单的数学运算,但是可以通过其他命令来实 ...

  7. JavaScript创建对象（三）——原型模式

    在JavaScript创建对象(二)——构造函数模式中提到,构造函数模式存在相同功能的函数定义多次的问题.本篇文章就来讨论一下该问题的解决方案——原型模式. 首先我们来看下什么是原型.我们在创建一个函 ...

  8. UVa 11384 - Help is needed for Dexter 分析, 树状数组 难度: 0

    题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...

  9. SpringBoot + JPA 连接MySQL完整实例（一）

    开发工具 1.Eclipse 2.Maven 3.Spring Boot 首先,Eclipse中配置好maven,具体请百度 工程结构: 实现步骤: 1.Eclipse中新建一个maven proje ...

  10. (C/C++学习笔记) 一. 基础知识

    一. 基础知识 ● 程序和C/C++ 程序: 根据Wirth (1976), Algorithms + Data Structures = Programs. Whence C: 1972, Denn ...