以前我们在js中写input各种事件时都会直接在input中写，昨天开始我开始全面使用jquery了，现在来谈一下我对jquery blur() focus()事件的学习笔记。

对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。

focus()：得到焦点时使用，和javascript中的onfocus使用方法相同。

如：

 代码如下 复制代码

$("p").focus(); 或$("p").focus(fn)

blur()：失去焦点时使用，和onblur一样。

如：

 代码如下 复制代码

$("p").blur(); 或$("p").blur(fn)

例

 代码如下 复制代码

<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>

鼠标在搜索框中点击的时候里面的文字就消失了。

 代码如下 复制代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input失去焦点和获得焦点jquery焦点事件插件</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//focusblur
    jQuery.focusblur = function(focusid) {
var focusblurid = $(focusid);
var defval = focusblurid.val();
        focusblurid.focus(function(){
var thisval = $(this).val();
if(thisval==defval){
                $(this).val("");
            }
        });
        focusblurid.blur(function(){
var thisval = $(this).val();
if(thisval==""){
                $(this).val(defval);
            }
        });
        
    };
/*下面是调用方法*/
    $.focusblur("#searchkey");
});
</script>
</head>

<body>
<form action="" method="post">
<input name="" type="text" value="输入搜索关键词" id="searchkey"/>
<input name="" type="submit" id="searchbtn" value="搜索"/>
</form>
<p>input失去焦点和获得焦点jquery焦点事件插件，<br/><strong style="color:#F00">鼠标在搜索框中点击的时候里面的文字就消失了</strong>。</p>

</body>
</html>

一个根据ajax值来判断是显示或隐藏div

 代码如下 复制代码

<tr>
    <td width='70' height='30' align='right'><span class="red">*</span> 手机：</td>
    <td width='198' align='center'><input name="tgmo" type="text" class="tcinp" id="tgmo" size="15"/></td>
    <td><span class="gray">用房乐网会员登录名可获取5房乐币
</span></td>
  </tr>

js

$(function(){
 
$('#tgmo').blur(function(){
 $.post('post.php?action=check',{'tgmo':$('tgmo').val()},function(data)
 {
  if( data==0 )
  {
   $('#sy_a').show();
   $('#autoregister').val(1); 
  }
  else
  {
   $('#sy_a').hide();
   $('#autoregister').val(0); 
  }
  
 });
})
  
});
【声明】 本文链接地址为: http://www.php230.com/1412685601.html，转载请注明出处！

jquery失去焦点与获取焦点事件blur() focus()的更多相关文章

  1. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  2. onfocus事件,onblur事件；Focus()方法,Blur()方法

    <1> <pre name="code" class="html"><!DOCTYPE html PUBLIC "-// ...

  3. Jquery输入框焦点事件及鼠表事件汇总

    对于用户的输入框input,我们常常会用ajax来实现与后台的交互.输入框的内容我们可以用.val()方法获取,对于输入框内的事件,我们常用到焦点,如:input.blur.focus.... inp ...

  4. 【jQeury】input输入框状态，input事件，blur事件，focus事件

    //输入框正在输入时 $("#test1").on('input',function(){ alert('正在输入'); }) //输入框得到焦点时 $("#test2& ...

  5. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  6. jQuery入门（3）事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  7. jQuery里面的常用的事件和基础动画的实现

    一:了解jquery里面常用的事件 二:了解基础动画的实现 1:加载DOM 在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行) 在jQu ...

  8. jQuery基础（三）事件

    1.鼠标事件 jQuery鼠标事件之click与dblclick事件 click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作. 方法一:$ele.click() 绑定$ele元素, ...

  9. jQuery三——筛选方法、事件

    一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. sql 盲注之正则表达式攻击

    -----------------------------------------MYSQL 5+----------------------------------------- 我们都已经知道,在 ...

  2. 浅析MySQL数据碎片的产生(data free)

    浅析MySQL数据碎片的产生 2011-03-30 09:28 核子可乐译 51CTO 字号:T | T MySQL列表,包括MyISAM和InnoDB这两种最常见的类型,而根据经验来说,其碎片的产生 ...

  3. 4816 江哥的dp题b

    4816 江哥的dp题b  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 给出两个1-N的随机排列A,B.若 ...

  4. VS2013 Web项目添加引用项目后，引用上有黄色的感叹号小图标

    RT,重新生成还是不行,然后重新打开VS,VS2013,还是不行. 最后,右键引用-属性-已解析 False. 为什么会未解析呢.终于找到问题根源了. 当前项目.net 4.0版,而引用的项目.net ...

  5. Windows 8.1 新增控件之 TimePicker

    之前已经为大家介绍过DatePicker 控件的相关内容,有日期控件当然就得有时间控件,本篇将和各位一起了解TimePicker 的使用方法. 先来介绍一下ClockIdentifier 属性,默认情 ...

  6. VS2013 抛出 stackoverflow exception 的追踪

    本公司使用VWG.Caslte ActiveRecord.CSLA.net .Quantz.net 等组件做为公司的开发基础,自2007年以来,一直工作正常,但最近(2015.12月)以来,打开MDA ...

  7. Linux socket多进程服务器框架三

    在使用select管理服务器连接的时候: 注意1:select是可中断睡眠函数,需要屏蔽信号 注意2:必须获取select的返回值nread,每次处理完一个事件,nread需要-1 注意3:如果客户端 ...

  8. 在GoF设计模式

    在GoF设计模式中,结构型模式有: 1.适配器模式 Adapter   适配器模式是将一个类的接口转换成客户希望的另外一个接口.适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作.   ...

  9. 微软虚拟学院MVA 字幕获取方法

    微软虚拟学院(MVA)上有一些不错的视频教程,但是,蛋疼的一点那就是视频要不就慢,要不就卡,总之当你的思维跟着视频深入的时候,duang~,卡一下,说不定就要重头开始,所幸的是提供了视频下载,下载速度 ...

  10. 玉伯的一道课后题题解（关于 IEEE 754 双精度浮点型精度损失）

    前文 的最后给出了玉伯的一道课后题,今天我们来讲讲这题的思路. 题目是这样的: Number.MAX_VALUE + 1 == Number.MAX_VALUE; Number.MAX_VALUE + ...