焦点事件:
  不是所有元素都有焦点事件,只有可交互性的元素才有,比如表单元素,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. Nginx教程(二) Nginx虚拟主机配置

    Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...

  2. js继承之借用构造函数继承

    我的上一篇文章介绍了,原型链继承模式.但是单纯的原型链模式并不能很好地实现继承. 一.原型链的缺点 1.1 单纯的原型链继承最大的一个缺点,来自于原型中包含引用类型的值. 本来,我们没有通过原型链实现 ...

  3. 前端向后台的华丽转身 — PHP入门篇

    三个月就这么悄悄溜走了,本K对于前端虽然有了一定的认识,但对一些方面还是处于一种比较萌币的状态,就在这种萌币状态下,本K又跟着大神浩开始了后台语言-PHP语言的学习.PHP的学习对于学过其他语言的人来 ...

  4. Java泛型学习

    1.泛型的概念 泛型即"参数化类型",就比如我们定义方法的时候,定义一个变量,称为形参,变量值根据传进去的实参的值不同而改变.而泛型的出现,就是为了解决类型也能根据传进去的类型改变 ...

  5. APUE-文件和目录(四)文件系统

    一个命令 mkfs 讲文件系统前先介绍一个用于创建文件系统的命令: mkfs mkfs [options] [-t type fs-options] device [size] 描述 mkfs用来在设 ...

  6. Win7安装Docker

    系统环境 1. windows 7 旗舰版64位 i5-2450M CPU  8G内存 2.支持“ Hardware Virtualization Technology”,并且,“virtualiza ...

  7. 每篇半小时1天入门MongoDB——3.MongoDB可视化及shell详解

    本篇主要介绍MongoDB可视化操作以及shell使用及命令,备份恢复.数据导入导出. MongoVUE安装和简单使用 使用mongo.exe 管理数据库虽然可行,功能也挺强大,但每次都要敲命令,即繁 ...

  8. JDK并发包

    JDK5之后引进了并发包java.util.concurrent,让并发的开发更加可控,更加简单.所以有必要好好学习下,下面从同步控制.并发容器.线程池三部分来详细了解它. 1. 各种同步控制工具的使 ...

  9. Oracle exp/imp数据导入导出工具基本用法

    一.获取帮助 exp/imp help=y 二.数据导出 1.将数据库完全导出,设置full选项exp system/manager@orcl file=d:\db.dmp full=y 2.导出数据 ...

  10. od的用法

    一.功能 查看非文本文档的内容 二.用法 1.语法 od [-A RADIX] [-t TYPE] 文件名 2.选项与参数 -A: 指定偏移量的输出形式 d[size] :利用十进制(decimal) ...