IE Onblur和焦点问题
[英]IE Onblur and focus issue
问题描述
当用户尝试离开控件而不在控件中输入任何值时，我试图显示警报并专注于控件。 此要求类似于用户被迫输入值（我知道此类要求存在某些限制）。
当用户离开textbox1时，将显示警报，同时，由于我尝试着重于textbox1，因此还会显示textbox2的警报。 这在IE中变成无限循环，并且弹出窗口都继续在IE中显示。
该代码在chrome中完美运行，但在ie的任何版本中均无效。
如下代码：
<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>
我不确定是否缺少某些东西，或者此限制仅适用于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
到目前为止，没有找到合适的解决方案。
编辑-
技巧-我使用了两个变量并将其设置在方法中。 在显示弹出窗口之前，我再次检查了这些值。
解决方案3
0 2015-03-04 06:47:00
基本上，一旦您关注文本字段，警报就会导致焦点消失。 在IE中， blur事件排在第一位是一种奇怪的行为。 也许您可以尝试替换警报并尝试使用console.log代替（如果打开了开发人员工具，则仅在IE 8和9中有效）。 或者最好是，您可以完全删除警报。 那应该工作。
<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>
从外部窗口返回时出现Onblur和Focus问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.