如何获取 div onblur 事件以执行 javascript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4847986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get div onblur event to execute a javascript function?
提问by Vamsi
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.
嗨，我有一个包含三个文本框的 div，我需要一个函数，一旦控件离开 div 标签，我就需要调用一个函数，我不想使用 onclick 事件，因为可以通过按下 将焦点移出 div键盘上的tab键或其他方式。我还想知道是否有办法使用 jquery 等任何 javascript 库来实现这一点。
Thank you, this is the sample html code
谢谢，这是示例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>
采纳答案by jhartz
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).
您可以将 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" />
Or, instead, using jQuery could simplify the process (especially if you have a lot of inputs):
或者，相反，使用 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" />
EDIT: I wrapped the event handlers inside a setTimeoutto make sure that the other element had time to focus.
编辑：我将事件处理程序包装在 a 中setTimeout以确保其他元素有时间聚焦。
回答by Bitsplitter
You'll need to add tabindex=0 to the div in order for it to gain focus. So something like
您需要将 tabindex=0 添加到 div 以使其获得焦点。所以像
<div tabindex="-1" onblur="Callme();">
should do it.
应该这样做。
回答by Todd L
I've used the following jQuery script in a similar scenario with 3 textboxes inside a div:
我在类似的场景中使用了以下 jQuery 脚本，在 div 中有 3 个文本框：
<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>
回答by Ron
<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>
回答by Dawson
Perhaps an "onChange" event would better serve your needs. I can't think of a situation where the DIV would be clicked, and not the input fields.
也许“onChange”事件会更好地满足您的需求。我想不出会点击 DIV 而不是输入字段的情况。
