焦点事件:
  不是所有元素都有焦点事件,只有可交互性的元素才有,比如表单元素,a标签。页面中只能有一个元素有焦点,一个聚焦,另一个就失焦,默认在document。

例子结构如下:  

  <form>
    <input type="text" name="txt1" id="txt" />
    <input type="button" name="btn" value="点击" />
  </form>

js操作如下:

  1.form.txt1.focus();    // 让元素获得焦点,该方法不会触发onfocus()事件。

  2.form.txt1.onfocus=function(){console.log(1);}  //  元素获得焦点时会触发该事件

  3.form.txt1.onblur=function(){console.log(2);}  //元素失去焦点时触发该事件

  4.form.btn.onclick=function(){ form.txt1.select(); }  //选中输入框中的所有文字

  5.form.btn.onclick=function(){ form.txt1.setSelectionRange(2,5) ; form.txt1.focus(); } / / setSelectionRange需要配合着focus()使用才看得到效果,其中setSelectionRange的结束位置不包含在内,setSelectionRange(start,end)包含两个参数,一个是start:起始位置;一个是end:结束位置。

  默认情况下,输入框中的文字被选中的文字颜色是蓝色,如果想要改变背景颜色,可以使用 #txt::selection{ background: pink; }来改变

js中表单的聚焦失焦事件的更多相关文章

  1. 关于vue.js中表单控件绑定练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  2. js中表单提交后按钮变灰色的功能

    表单提交后按钮变成灰色 http://www.111cn.net/wy/js-ajax/45299.htm

  3. js进阶 12-5 jquery中表单事件如何使用

    js进阶 12-5 jquery中表单事件如何使用 一.总结 一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是 ...

  4. JS事件 失焦事件(onblur)onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

    失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标 ...

  5. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  6. js事件、Js中的for循环和事件的关系、this

    一.js事件  1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...

  7. js表单提交,判断文本框,用户名密码是否为空,JS表单检测!

    当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...

  8. 原生js表单序列化----- FormData

    <style type="text/css"> .progress{ height: 10px; width: 600px; border: 1px solid red ...

  9. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

随机推荐

  1. Python 随机生成有效手机号码及身份证

    中国那么大,人那么多,几乎人手一部手机.手机号码已经作为各大互联网站的注册账户.同样,身份证更是如此.以下是生成有效手机号码和身份证号. 身份证需要下载districtcode.txt这个文件:htt ...

  2. jQuery中易混淆知识点总结(持续更新)

    find()与children() <body> <ul class="level-1"> <li class="item-i"& ...

  3. Linux vi 命令详解

    vi共分为三种模式:分别是一般模式,编辑模式与命令行模式 一般模式:以vi打开一个文件就直接了一般模式(这是默认的模式) 编辑模式:在指令模式下输入的按键“i, I, o, O, a, A, r, R ...

  4. 消息:SQL Server 2017(vNext)的第三个公开的CTP(社区技术预览版)发布了

    今天看到了一个新闻,跟大家分享一下,有兴趣的可以去尝试一下. SQL Server 2017 CTP3于5月23日发布了,详细版本号是6.7.55.0. 大家可以去安装试试.在下载页面,目前是SQL  ...

  5. 软件需求规格说明书(spec)

    1.spec 的目标是什么,spec 的目标不包括什么? 我们的目标是对用户发布的各种需求(需要伙伴的需求)进行处理,使别的用户可以看到信息,并且成功找到合适的伙伴一起! 不包括对用户之间的联系. 2 ...

  6. 【Netty】UDP广播事件

    一.前言 前面学习了WebSocket协议,并且通过示例讲解了WebSocket的具体使用,接着学习如何使用无连接的UDP来广播事件. 二.UDP广播事件 2.1 UDP基础 面向连接的TCP协议管理 ...

  7. 【二】python内置类型

    1.布尔类型 表示真假的类型(true和false) 数字 0.None,以及元素为空的容器类对象都可视作False,反之为 True. In [1]: bool(0) Out[1]: False I ...

  8. MyBatis7:MyBatis插件及示例----打印每条SQL语句及其执行时间

    Plugins 摘一段来自MyBatis官方文档的文字. MyBatis允许你在某一点拦截已映射语句执行的调用.默认情况下,MyBatis允许使用插件来拦截方法调用 Executor(update.q ...

  9. Mac OSX 搭建 Apache php mySql phpMyAdmin 开发环境

    基本环境和配置 Mac 系统:  OS X EI Caption  10.11.4 当前Mac用户名: ceshi 需要熟知的几个基本概念和操作: 1. 新建一个终端默认的是路径是: /Users/当 ...

  10. 封装TableView有可能用到的数据结构和UITableViewCell的一个继承类

    最近4年的时间,我已经做了5个App完全独立开发, 工作经历5个App, 维护了两个App. 在这期间用的最多的是UITableView, 因此也有许多感觉可以封装的. 现在就是我封装的. RXCel ...