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;

下面写一个实例：

<!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>

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

 

input文本框获取焦点和失去焦点判断的更多相关文章

  1. jquery注册文本框获取焦点清空,失去焦点赋值的简单实例

    在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语.   <html> <head> <meta h ...

  2. jquery注冊文本框获取焦点清空,失去焦点赋值

    在我们开发过程中特别是用户注冊时会有一个效果.就是文本框获取焦点清空提示,假设用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http ...

  3. 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)

    input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...

  4. (转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题

    完美解决 Android WebView 文本框获取焦点后自动放大问题 前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本 ...

  5. input文本框设置和移除默认值

    input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...

  6. HTML input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  7. 我的插件のinput文本框实现宽度自适应

    先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <htm ...

  8. js中input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  9. input文本框的value属性在页面中不随输入的数据而变化

    今天,在做试验遇到这么一个需求: 一个input文本框,输入值后将标签传到后台,在后台解析标签,发现value仍然是初值,不是我们改变后的值. 例如: <input name="&qu ...

随机推荐

  1. 贪心-poj-3040-Allowance

    题目链接: http://poj.org/problem?id=3040 题目意思: 有n种(n<=20)面额的硬币,每种硬币面值能整除比它大的面值.给一个c,告诉每种硬币的面值和数量,求最多能 ...

  2. 复合命令A等效于$a

    时间:2014.06.28 地点:基地 ------------------------------------------------------------------------------- ...

  3. Socket tips: UDP Echo service - Server code

    #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/soc ...

  4. Python 文件I/O （转）

    Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你 ...

  5. Python 日期和时间(转)

    Python 日期和时间 Python程序能用很多方式处理日期和时间.转换日期格式是一个常见的例行琐事.Python有一个 time 和 calendar 模组可以帮忙. 什么是Tick? 时间间隔是 ...

  6. Find命令简介

    Find命令主要用于目标的搜索,尽量做到少使用,因为find会消耗大量的系统资源. 使用该命令时,需要避开服务器运行高峰期,最好在指定的小范围内进行搜索,不要轻易使用全盘搜索. Find命令常用的参数 ...

  7. Android -------- 用XmlPullParser解析器解析XML文件

  8. java读取网页

    package cn.stat.p4.ipdemo; import java.io.IOException; import java.io.InputStreamReader; import java ...

  9. nsfocus-笔试题

    1.描述sendmail原理及通讯机制 sendmail程序接受到待发邮件后,通过关键字@判断邮件的格式是否符合要求,匹配成功后提取邮件后缀域名信息并查询DNS数据库相关MX(邮件专用)记录,若有匹配 ...

  10. android ioctl fuzz,android 本地提权漏洞 android root

    目前正在研究android 三方设备驱动 fuzzer , 也就是下图所说的 ioctl fuzzing, 下图是由keen team nforest 大神发布: 欢迎正在研究此方面的人联系我共同交流 ...