blur([[data],fn])

概述

当元素失去焦点时触发 blur 事件。

这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

参数

fn  在每一个匹配元素的blur事件中绑定的处理函数

[data],fn  data:blur([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的blur事件中绑定的处理函数

focus([[data],fn])

概述

当元素获得焦点时，触发 focus 事件。

可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。

参数

fn   在每一个匹配元素的focus事件中绑定的处理函数。

[data],fn   data:focus([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的focus事件中绑定的处理函数

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>

        <title></title>

        <script>

            var blurText="失去焦点";

            var focusText="获得焦点";

            $(document).ready(function(){

                $("#input").blur(blurText,function(){

                    $(this).val(blurText);

                    $(this).removeClass("main");

                });

                $("#input").focus(focusText,function(){

                    $(this).val(focusText);

                    $(this).addClass("main");

                });

            });

        </script>

        <style>

            .main{

                border: solid;

            }

        </style>

    </head>

    <body>

        <input id="input" type="text" />

    </body>

</html>

jQuery事件--blur()和focus()的更多相关文章

  1. jquery的blur之后,focus获取不到焦点的解决办法

    一:很多童鞋可能会遇到这种情况: jquery的blur之后,focus获取不到焦点. 二:使用场景: 用户填写信息的时候,若邮箱为空,则提示 请填写邮箱,并将光标置于填写邮箱的文本框里,方便用户的再 ...

  2. 一大波jQuery事件即将来袭！

    一.jQuery事件 1.focus()元素获得焦点 2.blur()元素失去焦点 3.change() 表单元素的值发生变化(可用于验证用户名是否存在) 4.click() 鼠标单击 5.dbcli ...

  3. jQuery事件整合

    一.jQuery事件 1.focus()元素获得焦点 2.blur()元素失去焦点 3.change() 表单元素的值发生变化(可用于验证用户名是否存在) 4.click() 鼠标单击 5.dbcli ...

  4. jquery失去焦点与获取焦点事件blur() focus()

    以前我们在js中写input各种事件时都会直接在input中写,昨天开始我开始全面使用jquery了,现在来谈一下我对jquery blur() focus()事件的学习笔记. 对于元素的焦点事件,我 ...

  5. Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...

  6. 解密jQuery事件核心 - 模拟事件（四）

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  7. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  8. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  9. jQuery事件总结

    blur() 触发或绑定blur事件.$("input").blur(function(){ $("input").css("background-c ...

随机推荐

  1. 浅谈KMP算法

    一.介绍 烤馍片KMP算法是用来处理字符串匹配问题的.比如说给你两个字符串A,B,问B是不是A的子串? 比如,eg就是aeggx的子串 一般讲字符串A称为主串,用来匹配的B串称为模式串 定义n为字符串 ...

  2. Spring 配置文件出现异常！

    spring配置文件错误 Referenced file contains errors (http://www.springframework.org/schema/beans/spring-bea ...

  3. 前端 chrome查看html样式基本操作

    Chrome浏览器是世界上HTML5支持最好的浏览器.提供了非常好的开发工具,非常适合我们开发人员使用.审查元素功能的快捷键是F12. 按检查或者F12 鼠标点击找标签 chorme审查元素的使用 - ...

  4. python3 open()函数调用方法简单示例

    python3 open()函数调用简介.Python open() 方法用于打开一个文件,并返回文件对象,在对文件进行处理过程都需要使用到这个函数,如果该文件无法被打开,会抛出 OSError. 注 ...

  5. 开发uniapp必备

    开发工具http://quickapp.dcloud.io/ 开发手册 http://uniapp.dcloud.io/api/README(2018-7-27 发布) 调试环境http://ask. ...

  6. input debounce

    项目背景是一个搜索框,不能实时的监听onChange 事件去发送请求,这样会造成服务器的压力 解决思路就是用 setTimeout + clearTimeout 普通js代码如下: / 下面是普通的j ...

  7. 云服务器--linux系统操作命令以及安装ngnix记录，以及手动部署本地文件

    1.控制台登陆服务器,需要首先知道服务器ip和密码,,命令是 ssh root@1.1.1.1(服务器IP),然后输入密码登入服务器 2.查看linux 版本的系统命令是 cat /etc/redha ...

  8. 小程序js执行顺序

    底部tab 有 login/index    my/index   home/index 操作1>进 login/index 页面,  index.js加载以下方法 onLoad页面加载onSh ...

  9. resful规范

    1.简介 什么是resful resful是一个规范,说白了就是面向资源编程,把网络中所有的东西,想象成资源 2.规范 10条规范 1)API与用户的通信协议,总是用HTTPS协议:HTTPS比htt ...

  10. Swagger Editor本地安装

    一:安装Node JS 二:下载源码swagger-editor源码,解压 下载地址:https://github.com/swagger-api/swagger-editor 三:在解压目录下运行进 ...