如何获得div onblur事件来执行JavaScript函数？

嗨我有一个包含三个文本框的div，我需要一个函数，一旦控件超出了div标签，我不想使用onclick事件，因为焦点可以移出div通过按下键盘上的Tab键或其他方式。我也想知道是否有一种方法来实现这个使用任何JavaScript库，如jQuery。如何获得div onblur事件来执行JavaScript函数？

谢谢你，这是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 2011-01-31 06:40:21

也许一个“的onChange”事件将更好地满足您的需求。我想不出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 2012-09-06 16:19:19

我曾与一个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

如何获得div onblur事件来执行JavaScript函数？

回答

相关问题