以前我们在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. luogu1003铺地毯[noip2011 提高组 Day1 T1]

    题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号从小到大的顺序平行于 ...

  2. bzoj3339 rmq problem (range mex query)

    给一个长度为n的数列a,q个询问,每次询问一段区间的mex.(没有出现过的最小非负整数) 1<=n,q<=200000,0<=ai<=200000. 题解1 莫队 我们将权值分 ...

  3. AFNetworking 基本使用

    AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其他方法为基础的. 下面这个例子是用来处理json请求的 3如何选择AFNetwork ...

  4. PAT 1014. 福尔摩斯的约会 (20)

    大侦探福尔摩斯接到一张奇怪的字条:"我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm".大侦 ...

  5. Notes: Principles of fMRI 1 (Coursera)

    course link: https://class.coursera.org/fmri1-001 Part 1  ❤ Three fundmental goals in fMRI: localiza ...

  6. Java 集合系列12之 TreeMap详细介绍(源码解析)和使用示例

    概要 这一章,我们对TreeMap进行学习.我们先对TreeMap有个整体认识,然后再学习它的源码,最后再通过实例来学会使用TreeMap.内容包括:第1部分 TreeMap介绍第2部分 TreeMa ...

  7. [转]nginx＋fastcgi+c/c++搭建高性能Web框架

    FROM : http://blog.csdn.net/marising/article/details/3932938 1.Nginx 1.1.安装 Nginx 的中文维基 http://wiki. ...

  8. Construct Binary Tree from Inorder and Postorder Traversal

    Construct Binary Tree from Inorder and Postorder Traversal Given inorder and postorder traversal of ...

  9. [JAVA教程] 2016年最新spring4框架搭建视频教程 【尚学堂】

    Spring4框架 主讲:邹波 类型:SSH 适合对象:学习完javase.数据库技术.jdbc者 Spring4.0作为一个广泛使用的开源框架,它由Rod Johnson创建.它是为了解决企业应用开 ...

  10. 数据字典生成工具之旅(3)：PowerDesign文件组成结构介绍及操作

    从这篇开始将正式讲解整个重要部分的实现细节,本篇讲解Pdm文件的解析.其实PDM文件就是XML文件,可以用Editplus或者VS打开查看.了解到这一点之后大家就能猜到,可以用解析XML的方式读取PD ...