zoukankan      html  css  js  c++  java
  • 6.20

    jquery失去焦点与获取焦点事件blur() focus()

     

    以前我们在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 >鼠标在搜索框中点击的时候里面的文字就消失了</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); 
      }
      
     });
    })
      
    });

  • 相关阅读:
    2017.3.11[bzoj2440][中山市选2011]完全平方数
    2017.3.6[hihocoder#1415]后缀数组三·重复旋律3
    2017.3.4[hihocoder#1407]后缀数组二·重复旋律2
    [NOI2013]快餐店
    [HNOI2014]米特运输
    [HNOI2015]亚瑟王
    [JLOI2013]卡牌游戏
    [SDOI2010]地精部落
    [ZJOI2007]棋盘制作
    [AHOI2009]中国象棋
  • 原文地址:https://www.cnblogs.com/czfzm/p/7057731.html
Copyright © 2011-2022 走看看