ホームページ > 記事 > ウェブフロントエンド > blur() はフォーカスを失い、focus() は jquery で focus イベントを取得します

blur() はフォーカスを失い、focus() は jquery で focus イベントを取得します

黄舟オリジナル: 2017-06-26 14:08:264824ブラウズ

以前は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の値に基づいて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); 
  }
  
 });
})
  
});

以上がblur() はフォーカスを失い、focus() は jquery で focus イベントを取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQueryでのブラーイベントとフォーカスイベントの使用に関する詳細な説明次の記事：jQueryでのブラーイベントとフォーカスイベントの使用に関する詳細な説明

続きを見る