以前我们在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. bzoj1082[SCOI2005]栅栏

    Description 农夫约翰打算建立一个栅栏将他的牧场给围起来,因此他需要一些特定规格的木材.于是农夫约翰到木材店购 买木材.可是木材店老板说他这里只剩下少部分大规格的木板了.不过约翰可以购买这些 ...

  2. git push时错误提示的解决办法 By default, updating the current branch in a non-bare repository error: is denied,

    在使用git将客户端的修改push到服务器上的时候,出现无法push,提示和stackoverflow上的http://stackoverflow.com/questions/2816369/git- ...

  3. Symbol ES6 新增的一种值类型数据，表示一种绝不重复的值

    let s1 = Symbol(33); let s2 = Symbol(33); alert(typeof(s1)); //数据类型判断 // alert(s1.toString()); //可把一 ...

  4. java集合比较

    几种集合的比较Hashset,hashmap无序的treeset,hashset有序的 linkedhashset 有序的,和插入数序一样的

  5. Java集合系列：-----------02Collection架构

    出处:http://www.cnblogs.com/skywang12345/p/3308513.html 我们知道Collection是和Map架构平级的,我们看一下这个架构是怎样的. 他主要的两个 ...

  6. radio被选中，但是重复点击后事件不触发

    网上找了好多帖子,都没用,在百度知道发现以下答案 知识点:使用 jq的prop才能设置 html $('.ss').click(function(){ $(this).find("input ...

  7. Toxy新手指南

    Neuzilla出品 官方网站:http://toxy.codeplex.com QQ群:297128022 官方微信公众号: Toxy 是干嘛用的?它是.NET平台上的文件抽取框架,主要解决各种格式 ...

  8. Android引导指示层的制作 （ViewStub + SharePreference）

    引导指示界面是个什么鬼东西?一张图即明了:

  9. 171 Excel Sheet Column Number

    /** * 题意:A表示1 B表示2 AA表示27 AB表示28 ------>给你一串字符串输出相应的数字 * 分析:这个就类似于二进制转十进制,从字符串后面往前遍历,然后pow(26,n)* ...

  10. 求height数组

    procedure getheight; var i,po1,po2:longint; begin to len do begin ; po1:=i;po2:=sa[rank[i]-]; while ...