onBlur:当输入框失去焦点后

onFocus:当输入框获得焦点后

这两个JavaScript事件是写在html标签中的例如：

<input  type="text"    onBlur=" " onFocus=" " />

使用jQuery的实现方法为：

　　　　对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。

focus()：得到焦点时使用，blur()：失去焦点时使用。

代码如下:

 
$("input").focus(); 或$("input").focus(function(){这里是获取焦点时的事件}) 
$("input").blur(); 或$("input").blur(function(){这里是失去焦点时的事件}) 
 

同样可以使用jQuery中提供的:focus伪类来判定元素是否获取焦点；

// Get the focused element:

var $focused = $(':focus');

// No jQuery:

var focused = document.activeElement;

// Does the element have focus:

var hasFocus = $('input').is(':focus');

// No jQuery:

elem === elem.ownerDocument.activeElement;

下面写一个实例：

按 Ctrl+C 复制代码

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<style>
.bor{
border:3px solid red;
}
</style>
<BODY>
<input type="text"/>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$(this).addClass("bor");
});
$("input").blur(function(){
$(this).removeClass("bor");
});
});
</script>
</BODY>
</HTML>

按 Ctrl+C 复制代码

当然还可以根据获取元素的状态修改其他元素的各项属性，或者是需要发生的事件

input输入框获得、失去焦点添加事件的更多相关文章

  1. input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈 大家可以看效果图的搜索输入框, ...

  2. input输入框，回车激活按钮事件代码

    <input type="text" name="输入框ID" id="输入框ID" onkeypress="if(even ...

  3. input 输入框默认获得焦点

    JavaScript实现默认焦点: 如下写<body>标签: <body onload="window.formLogin.user.focus()"> & ...

  4. input输入框focus获得焦点边缘发亮

    从某个插件上摘下来的代码 <html> <head> <title> New Document </title> <style> texta ...

  5. input输入框失去焦点，软键盘关闭后，滚动的页面无法恢复到原来位置

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  6. H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  7. oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测

    这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...

  8. input输入框的的input事件和change事件以及change和blur事件的区别

    input输入框的 oninput事件 ,在用户输入的时候触发,只要元素值发生变化就会触发 input输入框的 onchange事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...

  9. input输入框的input事件和change事件

    input输入框的onchange事件,要在 input 失去焦点的时候才会触发: 在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: onchange 事件也可用于单选框与 ...

随机推荐

  1. MD markdown入门

    1.Headings: 2.Phrase emphasis *italic text* **Bold text** 3.Listing items (在文字之前添加 + , - 或者 * ) -ite ...

  2. nodejs操作文件和数据流

    前言 node中有一组流api,它们可以像处理网络流一样处理文件.流api用起来非常方便,本节学习介绍文件处理基础和流的概念. 目录 处理文件路径 fs核心模块简介 操作流 慢客户端问题 1. 处理文 ...

  3. Linux登陆类型-Linux中如何临时配置IP

    Linux登录: 本地登录,直接在Linux主机上接上键盘显示器,然后输入用户名密码登录 远程登录,通过网络进行登录(需要IP 账户名 密码) windows中远程登录软件有 xshell.putty ...

  4. 51nod 最大子矩阵和

    一个M*N的矩阵,找到此矩阵的一个子矩阵,并且这个子矩阵的元素的和是最大的,输出这个最大的值. 我们可以降维,枚举矩形的长,然后算出一个一维数组,然后就转化成了最大字段和问题 #include< ...

  5. Git学习总结（5）——搭建Git简易高效服务器

    1. mysysgit+gitblit安装流程 1.1资源  需先下载好的资源(公司用的1.6,1.7+请自行匹配对应的mysysgit+gitblit):  jdk1.6  Git-1.8.4-pr ...

  6. Webhook

    Webhook就是用户通过自定义回调函数的方式来改变Web应用的一种行为,这些回调函数可以由不是该Web应用官方的第三方用户或者开发人员来维护,修改.通过Webhook,你可以自定义一些行为通知到指定 ...

  7. eXtremeDB相关问题解答（3）

    > 1.         Could our database support multi-database under one single instance? >   > 2. ...

  8. struts2 结合extjs实现的一个登录实例

    一.先搭建好struts2,能够通过myeclipse高速搭建. 二.再导入extjs所需的库文件. 三.写一个实体类User package com.ext.model; public class ...

  9. Unity中uGUI的控件事件穿透逻辑

    1.正常来说Image和Text是会拦截点击事件的,假设加入EventTrigger的话,就能够响应相应的交互事件. 2.假设Image和Text是一个Button的子控件.那么尽管其会显示在Butt ...

  10. 实用的 Python 包 —— 使用 win32 的剪贴板

    1. usage >> import win32clipboard >> win32clipboard.OpenClipboard() >> win32clipbo ...