javascript関数を実行するdiv onblurイベントを取得する方法は？

こんにちは私は3つのテキストボックスを含むdivを持っています、私はコントロールがdivタグから一度呼び出される関数が必要です、私はフォーカスがdivから移動することができますonclickイベントを使用したくないキーボードのタブキーを押すなどの方法で入力します。 jqueryのようなjavascriptライブラリを使ってこれを実現する方法があるかどうかを知りたいと思います。javascript関数を実行するdiv onblurイベントを取得する方法は？

ありがとう、これはおそらく「のonChange」イベントは、より良いあなたのニーズに役立つであろうサンプルHTMLコード

<html> 
<head> 
    <title>Div Onblur test</title> 

    <script type="text/javascript"> 
     function Callme() { 
      alert("I am Called") 
     } 
    </script> 

</head> 
<body> 
    <div onblur="javascript:Callme();"> 
     <input type=text value ="Inside DIV 1" /> 
     <input type=text value ="Inside DIV 2" /> 
     <input type=text value ="Inside DIV 3" /> 
    </div> 
    <input type=text value ="Outside DIV" /> 
</body> 
</html>

出典

2011-01-31 Vamsi

あなたは、入力要素のそれぞれにのonblurイベントハンドラをバインドし、それらのいずれかが（document.activeElementを使用して）フォーカスを持っている場合、ハンドラで確認することができます。

<script type="text/javascript"> 
    function checkBlur() { 
     setTimeout(function() { 
      if (document.activeElement != document.getElementById("input1") && 
       document.activeElement != document.getElementById("input2") && 
       document.activeElement != document.getElementById("input3")) { 
       alert("I am called"); 
      } 
     }, 10); 
    } 
</script> 
<!-- ... --> 
<div> 
    <input type="text" id="input1" value="Inside DIV 1" onblur="checkBlur()" /> 
    <input type="text" id="input2" value="Inside DIV 2" onblur="checkBlur()" /> 
    <input type="text" id="input3" value="Inside DIV 3" onblur="checkBlur()" /> 
</div> 
<input type="text" value="Outside DIV" />

または、代わりに、jQueryのを使用して（あなたが入力の多くを持っている場合は特に）プロセスを簡素化することができます：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#theDiv input").bind("blur", function() { 
      setTimeout(function() { 
       var isOut = true; 
       $("#theDiv input").each(function() { 
        if (this == document.activeElement) isOut = false; 
       }); 
       if (isOut) { 
        // YOUR CODE HERE 
        alert("I am called"); 
       } 
      }, 10); 
     }); 
    }); 
</script> 
<!-- ... --> 
<div id="theDiv"> 
    <input type="text" value="Inside DIV 1" /> 
    <input type="text" value="Inside DIV 2" /> 
    <input type="text" value="Inside DIV 3" /> 
</div> 
<input type="text" value="Outside DIV" />

編集：私はことを確認するためにsetTimeout内のイベントハンドラを包ん他の要素に焦点を合わせる時間がありました。

出典

2011-01-31 06:13:53 jhartz

isOut =！jQuery.contains（$（ "＃theDiv"）。get（）、document.activeElement）; – Ron

ありがとう、最初の解決策は私のために働いた – Vamsi

+1は、2番目のソリューションのためにも私を助けました。私は最初の-1の代わりに-1と言っています：activeElementの動作は** blurイベント中は保証されていませんが**ハンドラーが完了した後**です。 – superjos

です。 DIVがクリックされ、入力フィールドではない状況を考えることはできません。

出典

2011-01-31 06:00:51 Dawson

フォーカスを得るためには、tabindex = 0をdivに追加する必要があります。だから何かのように

<div tabindex="-1" onblur="Callme();">

それを行う必要があります。

出典

2011-01-31 06:06:03 Bitsplitter

<html> 
<head> 
    <title>Div Onblur test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function Callme() { 
      alert("I am Called"); 
     } 

     $(function() { 
      var callme; 
      $('#onblur-callme input') 
       .focus(function() { 
        callme = false; 
       }) 
       .blur(function() { 
        callme = true; 
        setTimeout(function() { 
         if (callme) { 
          Callme(); 
         } 
        }, 1); 
       }); 
     }); 
    </script> 

</head> 
<body> 
    <div id="onblur-callme"> 
     <input type="text" value ="Inside DIV 1" /> 
     <input type="text" value ="Inside DIV 2" /> 
     <input type="text" value ="Inside DIV 3" /> 
    </div> 
    <input type="text" value ="Outside DIV" /> 
</body> 
</html>

出典

2011-01-31 06:12:23 Ron

フォーカス/ぼかしイベントの相対的な順序は、異なるブラウザ間で同じであることが保証されていません。例えば。 [helephant、2008]（http://helephant.com/2008/01/16/focus-event-handler-run-in-different-order-in-ie-than-firefox/）を参照してください。これはあなたのコードに問題を引き起こします（そして、私のことも同様です）。 – superjos

私はdivの内側の3つのテキストボックスと同様のシナリオでは、次のjQueryのスクリプトを使用しました：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("jQuerySelectorToGetYourDiv").focusout(function (e) { 
      if ($(this).find(e.relatedTarget).length == 0) { 
       // Focus is now outside of your div. Do something here. 
       // e.Target will give you the last element within the 
       // div to lose focus if you need it for processing. 
      } 
     }); 
    }); 
</script>

出典

2013-03-26 04:38:06

javascript関数を実行するdiv onblurイベントを取得する方法は？

答えて

関連する問題