Menu
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.
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>
644
You'll need to add tabindex=0 to the div in order for it to gain focus. So something like
<div tabindex="-1" onblur="Callme();">
should do it.
53
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" />
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" />
EDIT: I wrapped the event handlers inside a setTimeout to make sure that the other element had time to focus.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
