Question

当用户尝试离开控件而不在控件中输入任何值时，我正在尝试显示警报并专注于控制。这个要求就像用户被迫输入值（我知道这些要求存在某些限制）。

当用户离开textbox1时，会显示警报，同时显示textbox2的警报，因为我正在尝试关注textbox1。这在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？

Answer 1

<!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>

Answer 2

直到现在还没有找到合适的解决方案。

编辑 -

技巧 - 我使用了两个变量并将它们设置在方法中。在显示弹出窗口之前，我再次检查了这些值。

Answer 3

基本上，只要您专注于文本字段，您的警报就会使焦点消失。 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>

IE Onblur和焦点问题

3 个答案: