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. [转载]ios app 发布遇到的问题uinewsstandapp=true

    原文地址:ios app 发布遇到的问题uinewsstandapp=true 作者:Capacity To include newsstand features, the info.plist mu ...

  2. 解决操作过快导致ajax异常的办法

    //控制点击过快ajax异常 var state = true; function test() { if (state) { state = false; var val = accMul((uCo ...

  3. DNN Module - Responsive Html Tabs 3 介绍

    Responsive Html Tabs 模块可以运行于DNN7及以上版本,支持响应式.用户界面较为友好,可以插入自定义的HTML. Demo This is a user-friendly, ful ...

  4. Android-操作栏之副标题

    我们的目标是在操作栏右侧加上一个选项菜单,点击它就可显示或者隐藏操作栏的副标题. 由于操作栏是在API11级以后出现的,因此必须考虑兼容性问题.我们直接让低于API11的设备根本看不到选项菜单即可.建 ...

  5. .NET Linq获取一个集合中的一个或多个属性，赋值到新的类对象

    //得到自定义的list var list = schoolGradeClassModelList.Select(x => new DropDownListData() { DataTextFi ...

  6. Asp.Net--下载文件

    实现方式1: protected void DownLoad_Click(object sender, EventArgs e) { //获取要下载的文件 string filename = Serv ...

  7. out返回值的用法与用途

    static void Main(string[] arr) { Console.WriteLine("请输入用户名"); string uname = Console.ReadL ...

  8. 1.1C++入门 未完待续。。。

    第一个C++程序: #include<iostream> int main() { std::cout << "Hello World !" << ...

  9. Qt小程序仿写----FileRead程序

    该程序实现如下功能:1.打开TXT文件A.txt:2.将文件路径显示到一个文本编辑框里面,文件内容显示到一个文本域里面:3.在文本域里面更改文件内容之后,保存文本域的内容到当前文件路径下. 定义了一F ...

  10. Mysql中的 的 Cascade ，NO ACTION ，Restrict ，SET NULL

    转载自:http://blog.163.com/inflexible_simple/blog/static/1676946842011616102543931/ 外键约束对子表的含义:    如果在父 ...