如何获取div onblur事件来执行javascript函数？ [英] How to get div onblur event to execute a javascript function?
问题描述
嗨
我有一个包含三个文本框的div，我需要在控件超出div标签时调用一个函数，我不想使用onclick事件，因为可以移动焦点通过按键盘上的Tab键或其他方式离开div。
我还想知道是否有办法使用任何javascript库来实现这一点。
Hi I have a div that contains three textboxes , i need a function to be called once the control is out of the div tag, I don't want to use the onclick event because the focus can be moved out of the div by pressing the tab key on the keyboard or some other way. I would also like to know if there is a way to achieve this using any javascript libraries like jquery.
谢谢，这是示例html代码
Thank you, this is the sample html code
<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>
推荐答案
您可以将onblur事件处理程序绑定到每个输入元素并检查处理程序是否有任何焦点（使用 document.activeElement ）。
You can bind the onblur event handler to each of the input elements and check in the handler if any of them have focus (using 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可以简化流程（特别是如果你有很多输入）：
Or, instead, using jQuery could simplify the process (especially if you have a lot of inputs):
<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 确保其他元素有时间聚焦。
I wrapped the event handlers inside a setTimeout to make sure that the other element had time to focus.
这篇关于如何获取div onblur事件来执行javascript函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
