blur() loses focus and focus() gets focus event in jquery-JS Tutorial-php.cn

blur() loses focus and focus() gets focus event in jquery

黄舟

Release： 2017-06-26 14:08:26

Original

4860 people have browsed it

In the past, when we wrote various input events in js, we would write them directly in the input. Yesterday, I started to fully use jquery. Now let’s talk about my study notes on the jquery blur() focus() event.

For the focus event of the element, we can use jQuery's focus function focus(), blur().

focus(): Used when focus is obtained, the same as onfocus in javascript.

Such as:

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

Copy after login

Such as: blur(): used when the focus is lost, the same as onblur.

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

Copy after login

Example

<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>

Copy after login

When the mouse is clicked in the search box, the text inside disappears.

<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>

Copy after login

An ajax value to determine whether to show or hide p

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

js

$(function(){
 
$(&#39;#tgmo&#39;).blur(function(){
 $.post(&#39;post.php?action=check&#39;,{&#39;tgmo&#39;:$(&#39;tgmo&#39;).val()},function(data)
 {
  if( data==0 )
  {
   $(&#39;#sy_a&#39;).show();
   $(&#39;#autoregister&#39;).val(1); 
  }
  else
  {
   $(&#39;#sy_a&#39;).hide();
   $(&#39;#autoregister&#39;).val(0); 
  }
  
 });
})
  
});

Copy after login

The above is the detailed content of blur() loses focus and focus() gets focus event in jquery. For more information, please follow other related articles on the PHP Chinese website!