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. Web 端 js 导出csv文件

    http://www.qdfuns.com/notes/35821/2ab249182734d1f5c66da6b5cf395db9.html

  2. jquery基本Dom操作

    1 html()获取所有的html内容 2 html(value) 设置html内容,有html自动解析 3 text() 获取文本内容 4 text(value) 设置文本内容,有html自动转义 ...

  3. Server.UrlEncode与HttpUtility.UrlEncode的区别

    一.HttpUtility.UrlEncode 方法 1.public static string UrlEncode(byte[]) 将字节数组转换为已编码的 URL 字符串. 2.public s ...

  4. 机器学习实践：《Python机器学习实践指南》中文PDF+英文PDF+代码

    机器学习是近年来渐趋热门的一个领域,同时Python 语言经过一段时间的发展也已逐渐成为主流的编程语言之一.<Python机器学习实践指南>结合了机器学习和Python 语言两个热门的领域 ...

  5. 【分享】School Rumble校园迷糊大王PSP姐姐事件+PS2游戏第一,二学期【带VNR翻译教程】

    7/22/2014 TUE   为「スクールランブル 姉さん事件です」加入了BANDAI PSP的引擎. 校园迷糊大王PSP姐姐事件 下载地址1:http://www.bego.cc/file/689 ...

  6. 从零開始制作H5应用（2）——V2.0版，多页单张图片滑动，透明过渡及交互指示

    上一次.我们制作了我们第一个H5场景应用的V1.0版,这次我们趁热打铁.在上一版的基础上对层序进行改动和扩展. 任务 1.页面数量由3张增加至9张: 2.每张页面中放入一张全屏自适应的图片. 3.修复 ...

  7. C++ Primer高速入门之六：数组和指针

    更新:勘误,delete [] 猪 我们知道,C语言以及早期的面向结构的语言差点儿都支持数组定义.比方整形数组int 女神[2].表示有俩数: 女神[0], 女神[1].她们都是整数. C++ 语言为 ...

  8. u盘安装14.04ubuntu系统

    最近在安装ubuntu 14.04系统,总结了下安装的方法,记录如下 1.下载ubuntu 14.04 iso文件,下载地址 http://www.ubuntu.com/download/deskto ...

  9. 面向对象（OO）基础

    面向对象,英文Object-Oriented,简称OO),另外相关的还有:面向对象分析(Object-Oriented Analysis,OOA) 面向对象设计(Object-Oriented Des ...

  10. 65.Express---express-session

    转自:https://blog.csdn.net/zhangweiwtmdbf/article/details/50723816 第一部分 session概述 1.1 session 是什么? Ses ...