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. Codefroces 822C Hacker, pack your bags!

    C. Hacker, pack your bags! time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  2. vue+ webpack中的animate.css实现的执行多个连续的动画

    1.安装 npm install animate.css 2.使用方法 入口文件App中进行引入 import animate from 'animate.css' 3.多个连续的动画 实现的效果:实 ...

  3. 学习推荐《Python神经网络编程》中文版PDF+英文版PDF+源代码

    推荐非常适合入门神经网络编程的一本书<Python神经网络编程>,主要是三部分: 介绍神经网络的基本原理和知识:用Python写一个神经网络训练识别手写数字:对识别手写数字的程序的一些优化 ...

  4. js编码方式详解

    escape.encodeURI 和encodeURIComponent 的区别 escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码 ...

  5. Windows Server 2016 主域控制器搭建

    基本上微软产品都需要依附于域控制器做身份认证,接下来我们一起来对Windows Server 2016 进行AD活动目录功能添加.1.更改服务器IP地址2.修改计算机名称(重新启动计算机)3.打开服务 ...

  6. Android开发系列（十六）：【Android小游戏成语连连看】第二篇

    写的晚了,在分工个Z市高中的一个成绩查询的系统,原系统居然是用VB写的,我不得不佩服原本写系统的那位哥们真能耐得住. 明天搭建下SVN就等着先发project款然后開始项目了.想想有工资进账,心里也为 ...

  7. QQ互联账号登录

    本文说明的是依据某应用通过网页的qq信息来登录的过程.用途是利用QQ账号就能高速自己主动注冊并可以登录客户应用. 从webserver与腾讯server通信获取开房平台用户OpenID,再在应用ser ...

  8. leetcode： Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  9. 73.node.js开发错误——TypeError: Cannot set property 'XXX' of undefined

    转自:https://blog.csdn.net/fd214333890/article/details/53467429

  10. js -- img 随着鼠标滚轮的变化变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...