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. 华为OJ:2041 放苹果

    这道题难点不在于代码怎么写,而是思路怎么想. 感觉一般这样的题要么你理好一个思路要么你最后总结出一个公式,要么你自己模拟它的运作方式,用迭代,或者递归的方式来做. 有点像我们曾经学的排列组合. 对于m ...

  2. Swift中实现点击、双击、捏、旋转、拖动、划动、长按手势的类和方法介绍

    1.UITapGestureRecognizer 点击/双击手势 代码如下: var tapGesture = UITapGestureRecognizer(target: self, action: ...

  3. Zend Framework学习日记(1)--环境搭建篇(转)

    Zend Framework学习日记(1)--环境搭建篇 (1)开发工具 Zend Framework框架:http://framework.zend.com/download/latest 包含2个 ...

  4. 图片变换 矩阵 Bitmap Matrix

    Matrix矩阵介绍 在Android中,对图片的处理需要使用到Matrix类,Matrix是一个3 x 3的矩阵,内部就是个一维数组,内部有9个元素:可以通过setValues( float[])进 ...

  5. 国外十个出名的 upload 上传组件

    在日常开发中,我们常会用到很多的组件及共用代码提高我们的开发效率.   King MEDIA - $ 17.00 / 11 Sales DNNStore | 6/5/2014 6:06:42 PM|  ...

  6. cell高度自动适应文章内容

    效果: 描述:表视图中生成多个不同的cell,cell的高度跟文字内容的多少有关 要求:需要自己在网上下载一个plis文件,然后修改两个标题 一 : 创建工程文件UIAutomaticCellHeig ...

  7. 在OC中调用Swift类中定义delegate出现:Property 'delegate' not found on object of type ...

    找了许久没找到答案, 在下面的链接中, 我解决了这个问题: http://stackoverflow.com/questions/26366082/cannot-access-property-of- ...

  8. MySql中查询表中的列名

    例如我的数据库名为"example",使用 USE example; 确定使用example数据库.使用 show tables; 显示数据库中的所有表.使用 DESC perso ...

  9. 转载：mysql-Auto_increment值修改

    转载网址:http://libo93122.blog.163.com/blog/static/1221893820125282158745/ | 2012-03-13 11:19:10 | 2012- ...

  10. Python核心编程(第八章)--条件和循环

    如果一个复合语句(if子句,while或for循环)的代码仅仅包含一行代码,可以和前面的语句写在同一行上:   elif语句(else-if) 条件表达式(三元操作符) X if C else Y 计 ...