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. 三、Solr多核心及分词器（IK）配置

    多核心的概念 多核心说白了就是多索引库.也可以理解为多个"数据库表" 说一下使用multicore的真实场景,比若说,产品搜索和会员信息搜索,不使用多核也没问题,这样带来的问题是 ...

  2. 我的Android进阶之旅------>Android安全退出应用程序的几种方式

    当应用不再使用时,通常需要关闭应用,可以使用以下几种方法关闭android应用: 第一种方法:首先获取当前进程的id,然后杀死该进程.  建议使用这种方式 android.os.Process.kil ...

  3. 【Android】Activity的菜单机制和方法解析

    Activity有一套机制来实现对菜单的管理,方法如下: 1. 初始化菜单 public boolean onCreateOptionsMenu(Menu menu) 此方法用于初始化菜单,其中men ...

  4. android 滚动视图（ScrollView）

    为了可以让内嵌布局管理器之中加入多个显示的组件,而且又保证程序不这么冗余,所以可以通过 Activity程序进行控制,向内嵌布局管理器中添加多个组件. ScrollView提供一个显示的容器,可以包含 ...

  5. TravelCMS旅游网站系统前台诞生记-2（后台框架篇）

    经过一个多月的研发,前台页面已基本成型了,已开发了线路和签证两大模块,支持在线支付,微信支付待开发,在这个过程中,发现前端技术远比后台技术注重的细节多,特别是css,比我想象的要难,为了兼容各种浏览器 ...

  6. 武汉科技大学ACM ：1001: A + B Problem

    Problem Description Calculate A + B. Input Each line will contain two integers A and B. Process to e ...

  7. Guava API学习之Multimap

    相信大家对Java中的Map类及其之类有大致的了解,Map类是以键值对的形式来存储元素(Key->Value),但是熟悉Map的人都知 道,Map中存储的Key是唯一的.什么意思呢?就是假如我们 ...

  8. python入门安装

    一.在python官网上下载python3.4或python2.7版本,这两个版本目前比较稳定,安装第3方包相对而言没有什么问题. 二.安装成功后,在计算机->属性->高级系统设置-> ...

  9. MobileProject

    iOS开源项目MobileProject功能点介绍 一:MobileProject简介 MobileProject项目是一个以MVC模式搭建的开源功能集合,基于Objective-C上面进行编写,意在 ...

  10. 命令行工具命令 - run包到手机里

    命令行工具命令 你完全可以选择不输入以下这些命令,执行这些命令的结果与在 Android Studio 中单击"运行"按钮是一样的. chmod +x gradlew - 此命令只 ...