Maison > Article > interface Web > flou () perd le focus et focus () obtient un événement de focus dans jquery

flou () perd le focus et focus () obtient un événement de focus dans jquery

黄舟original: 2017-06-26 14:08:264798parcourir

Dans le passé, lorsque nous écrivions divers événements d'entrée en js, nous les écrivions directement dans l'entrée Hier, j'ai commencé à utiliser pleinement jquery. Parlons maintenant de mes notes d'étude sur jquery blur() focus(). événement.

Pour les événements de focus d'élément, nous pouvons utiliser les fonctions focus de jQuery focus(), blur().

focus() : Utilisé lorsque le focus est obtenu, le même que onfocus en javascript.

Tels que :

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

Tels que : flou() : utilisé lorsque la mise au point est perdue, de la même manière que onflou.

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

Exemple

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

Lorsque vous cliquez avec la souris dans le champ de recherche, le texte à l'intérieur disparaît.

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

Un p basé sur la valeur ajax pour déterminer s'il faut afficher ou masquer 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); 
  }
  
 });
})
  
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée sur l'utilisation des événements de flou et de focus dans jQueryArticle suivant：Explication détaillée sur l'utilisation des événements de flou et de focus dans jQuery

Articles Liés

Voir plus