IE Onblur 和焦点问题

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

基本上，一旦您将焦点放在文本字段上，您的警报就会导致焦点消失。 blur 事件首先出现在 IE 中是一种奇怪的行为。也许您可以尝试替换警报并尝试使用 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>

Answer 2

到目前为止没有找到合适的解决方案。

编辑 -

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

Answer 3

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

IE Onblur 和焦点问题

IE Onblur and focus issue

javascript

internet-explorer