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. msiexec

    msiexec: runCmd = new String[]{ "msiexec", "/i", exeName, "/quiet", &q ...

  2. cf B. Black Square

    B. Black Square time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  3. Scrapy发送POST请求

    一.发送post请求需要将start_urls注释,然后重写start_requests方法二.使用yield scrapy.FormRequest(url=post_url, formdata=fo ...

  4. U-BOOT启动流程分析--start_armboot函数（二）

    第二阶段的功能: 初始化本阶段所需的硬件设备(主要设置系统时钟.初始化串口.Flash.网卡.USB) 检测系统内存映射(memory map) 将内核映像和根文件系统映象从Flash上读到RAM空间 ...

  5. Oracle Database Sample Schemas

    本文在Creative Commons许可证下发布 最近在钻研Oracle 11gR2,写SQL缺乏Demo表,研究他家的官方资料时发现一块甲骨文已经给我们准备Sample Schemas.比如说SC ...

  6. 紫书 习题 10-21 UVa 1649 (组合数）

    C(n, k) = m, 固定k,枚举k 这里用到了组合数的一个性质 当k固定的时候,C(2 * k, k) 最小 C(m, k)最大(对于这道题而言是这样,因为大于m 就最终答案不可能为m了) 所以 ...

  7. 【Henu ACM Round#17 E】Tree Construction

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 做这题之前先要知道二叉排序树的一个性质. 就是它的中序遍历的结果就是这个数组升序排序. (且每个节点的左边的节点都是比这个节点的值小 ...

  8. visualvm监控tomcat

    https://my.oschina.net/weidedong/blog/787203

  9. hdu 1171 Big Event in HDU（01背包）

    代码: #include<cstdio> #include<cstring> #include<algorithm> using namespace std; in ...

  10. LeetCode Implement strStr()（Sunday算法）

    LeetCode解题之Implement strStr() 原题 实现字符串子串匹配函数strStr(). 假设字符串A是字符串B的子串.则返回A在B中首次出现的地址.否则返回-1. 注意点: - 空 ...