以前我们在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. git删除远程仓库的文件或目录

    git rm -r --cached a/2.txt //删除a目录下的2.txt文件   删除a目录git rm -r --cached a git commit -m "删除a目录下的2 ...

  2. 030医疗项目-模块三：药品供应商目录模块——供货商药品目录查询功能----------Dao层：基本的查询语句的编写

    我们安装显示的要求: 我们能看到显示的目录里面有:供货企业的名字(这个数据来自于供货商的表[usergys]),流水号,通用名,剂型(这些都来自药品信息表),供货的状态(这个呢在gysypml_con ...

  3. 关于NOIP2016与NOI2018

    NOIP2016惨淡收场了,距离省一还有相当一大段距离,省队更是差了十条街去了,不过没关系. 既然已经对信息学产生了兴趣,竞赛无疑是最好的锻炼场所. 路是自己选择的,伤痕累累也要走下去. 还有一年,事 ...

  4. IntelliJ IDEA 13试用手记(附详细截图)

    从去年开始转java以来,一直在寻找一款趁手的兵器,eclipse虽然是很多java程序员的首选,但是我发现一旦安装了一些插件,workspace中的项目达到数10个以后,经常崩溃,实在影响编程的心情 ...

  5. 2015-2016-2 《Java程序设计》项目小组博客

    2015-2016-2 <Java程序设计>项目小组博客 1451 完+美 java项目 守望先疯 JavaGroup 07_10_20_22 FromBottomToTop L.G.Su ...

  6. 几种任务调度的 Java 实现方法与比较

    综观目前的 Web 应用,多数应用都具备任务调度的功能.本文由浅入深介绍了几种任务调度的 Java 实现方法,包括 Timer,Scheduler, Quartz 以及 JCron Tab,并对其优缺 ...

  7. Theano2.1.11-基础知识之稀疏

    来自:http://deeplearning.net/software/theano/tutorial/sparse.html sparse 通常来说,稀疏矩阵可以和常规矩阵一样提供相同的功能.两者不 ...

  8. 3到6年的.NETer应该掌握哪些知识？

    我们组的开发人力一直比较紧张,今年春节后,高层终于给了几个headcount,我们可以开始招人了.从三月初我们就开始找简历,渠道有拉钩,内推,我司自己的招聘网站和智联等.简历筛了很多,也打了很多电话, ...

  9. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  10. 用canvas 实现个图片三角化（LOW POLY）效果

    之前无意中看到Ovilia 用threejs做了个LOW POLY,也就是图片平面三角化的效果,觉得很惊艳,然后就自己花了点时间尝试了一下. 我是没怎么用过threejs,所以就直接用canvas的2 ...