你好
我有一个div包含三个文本框,我需要一个调用的函数,一旦控件脱离了div标签,我不想使用onclick事件,因为焦点可以通过按Tab键移出div键盘上的键或其他方式.
我也想知道是否有办法使用任何 javascript库(如jquery)来实现.
我有一个div包含三个文本框,我需要一个调用的函数,一旦控件脱离了div标签,我不想使用onclick事件,因为焦点可以通过按Tab键移出div键盘上的键或其他方式.
我也想知道是否有办法使用任何 javascript库(如jquery)来实现.
谢谢,这是示例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>
解决方法
您可以将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中,以确保另一个元素有时间聚焦.
