IE Onblur和焦点问题
[英]IE Onblur and focus issue
问题描述
I am trying to show alert and focus on control when user try to leave control without entering any value in the control. 
当用户尝试离开控件而不在控件中输入任何值时，我试图显示警报并专注于控件。 This requirement is something like user is forced to enter values (I know there are certain limitations of such requirements). 此要求类似于用户被迫输入值（我知道此类要求存在某些限制）。
When user leaves textbox1 alert is shown and at the sametime alert for textbox2 is also displayed as I am trying to focus on textbox1. 当用户离开textbox1时，将显示警报，同时，由于我尝试着重于textbox1，因此还会显示textbox2的警报。 This becomes infinite loop in IE and both the pop up keep on displaying in IE. 这在IE中变成无限循环，并且弹出窗口都继续在IE中显示。
This code works perfectly in chrome but not in any version of ie. 该代码在chrome中完美运行，但在ie的任何版本中均无效。
Code sniphet below: 如下代码：
<html>
<head>
<script language="javascript">
function ShowAlertAndFocus1(){
var txt1 = document.getElementById("txtBox1");
if(txt1.value.length == 0){
alert("Blur 1 called");
txt1.focus();
};
};
function ShowAlertAndFocus2(){
var txt2 = document.getElementById("txtBox2");
if(txt2.value.length == 0){
alert("Blur 2 called");
txt2.focus();
};
};
</script>
</head>
<body>
<input type="text" id = "txtBox1" onblur="ShowAlertAndFocus1();"/>
<input type="text" id = "txtBox2" onblur="ShowAlertAndFocus2();"/>
</body>
</html>
I am not sure if am missing something or this limitation is with IE only? 我不确定是否缺少某些东西，或者此限制仅适用于IE？
3 个解决方案
解决方案1
2 已采纳 2015-04-25 20:44:48
<!DOCTYPE html>
<html>
<head>
<title> x </title>
<script>
function setOnBlur( txtBox,n ){
setTimeout( function(){
if (document.activeElement==txtBox) {
txtBox.onblur=function(){
if (txtBox.value.length == 0){
alert("Blur "+n+" called")
setTimeout( function(){txtBox.focus()},0 )
}
else txtBox.onblur=null
}
}
},0)
}
</script>
</head>
<body>
<input type=text id=txtBox1 onfocus=setOnBlur(txtBox1,1) >
<input type=text id=txtBox2 onfocus=setOnBlur(txtBox2,2) >
</body>
</html>
解决方案2
1 2015-04-25 17:34:52
No Proper Solutions found till now. 到目前为止，没有找到合适的解决方案。
EDIT - 编辑-
Trick - I used two variables and set them inside the methods. 技巧-我使用了两个变量并将其设置在方法中。 I again checked the values before showing the popup. 在显示弹出窗口之前，我再次检查了这些值。
解决方案3
0 2015-03-04 06:47:00
Basically, your alerts cause the focus to go away as soon as you focus on the text fields. 基本上，一旦您关注文本字段，警报就会导致焦点消失。 It is an odd behavior in IE that the blur event comes first. 在IE中， blur事件排在第一位是一种奇怪的行为。 Maybe you can try replacing the alerts and try using console.log instead (That would only work in IE 8 & 9 if developer tools are opened). 也许您可以尝试替换警报并尝试使用console.log代替（如果打开了开发人员工具，则仅在IE 8和9中有效）。 Or best, you can remove the alerts completely. 或者最好是，您可以完全删除警报。 That should work. 那应该工作。
<html>
<head>
<script language="javascript">
function ShowAlertAndFocus1(){
var txt1 = document.getElementById("txtBox1");
if(txt1.value.length == 0){
console.log("Blur 1 called");
txt1.focus();
};
};
function ShowAlertAndFocus2(){
var txt2 = document.getElementById("txtBox2");
if(txt2.value.length == 0){
console.log("Blur 2 called");
txt2.focus();
};
};
</script>
</head>
<body>
<input type="text" id = "txtBox1" onblur="ShowAlertAndFocus1();"/>
<input type="text" id = "txtBox2" onblur="ShowAlertAndFocus2();"/>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.