Question

我有一个JavaScript代码，可以在除Firefox之外的所有浏览器中完美运行。我正在Firefox Quantum 66.0.2版（64位）中运行它。我有三个HTML输入控件，所有控件的显示样式均设置为none。单击链接将显示第一个输入。在第一个输入发生聚焦事件时，第一个输入将隐藏，第二个输入将变为可见。同样，在聚焦第二个输入时，第二个输入隐藏，第三个输入可见。

function showFirst() {
    //Show first input
    $('#first').css('display', 'inline');
    $('#first').focus();
}

$(document).ready(function () {
    $('#first').focusout(function (event) {
        //Write log
        $('body').append('first focusout <br/>');

        //hide itself
        event.currentTarget.style.display = 'none';
        //show next input i.e. second
        $('#second').css('display', 'inline');
        $('#second').focus();
    });
    $('#second').focusout(function (event) {
        //Write log
        $('body').append('second focusout <br/>');

        //hide itself
        event.currentTarget.style.display = 'none';

         //show next input i.e. third
        $('#third').css('display', 'inline');
        $('#third').focus();
    });
    $('#third').focusout(function (event) {
        //Write log
        $('body').append('third focusout <br/>');

        //hide itself
        event.currentTarget.style.display = 'none';

         //show next input i.e. first
        $('#first').css('display', 'inline');
        $('#first').focus();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--It will show first input-->
<a href="#" onclick="showFirst();">Click to show first</a>

<!--Its focusout event will hide it and will show second input-->
<input type="text" id="first" value="" style="display:none;background-color:yellow; color:black;" placeholder="First" />

<!--Its focusout event will hide it and will show third input-->
<input type="number" id="second" value="" style="display:none;background-color:red; color:white;" placeholder="Second" />

<!--Its focusout event will hide it and will show first input-->
<input type="number" id="third" value="" style="display:none;background-color:green; color:white;" placeholder="Third" />
<br />
<br />
<a href="#">&nbsp;</a> <!--Just to receive focus-->

问题：

单击“单击以显示第一个”时，将显示“第一个”输入。按下选项卡时，将自动触发“第二”和“第三”的焦点事件，并且从不显示“第二”和“第三”输入。有趣的是，如果所有输入类型都从数字更改为文本，则相同的代码可以正常工作。

在Firefox中打开this JSFiddle，以查看其运行情况。

Answer 1

在触发上一个输入焦点事件之后，需要为下一个输入设置侦听器。

尝试以下代码。

function showFirst() {
        //Show first input
        $('#first').css('display', 'inline');
        $('#first').focus();
    }
    $(document).ready(function () {
        $('#first').focusout(function (event) {
            //Write log
            $('body').append('first focusout <br/>');

            //hide itself
            event.currentTarget.style.display = 'none';
            //show next input i.e. second
            $('#second').css('display', 'inline');
            $('#second').focus();
            
            $('#second').focusout(function (event) {
                //Write log
                $('body').append('second focusout <br/>');

                //hide itself
                event.currentTarget.style.display = 'none';

                 //show next input i.e. third
                $('#third').css('display', 'inline');
                $('#third').focus();
                
                $('#third').focusout(function (event) {
           	 		
                //Write log
            		$('body').append('third focusout <br/>');

                  //hide itself
                  event.currentTarget.style.display = 'none';

                   //show next input i.e. first
                  $('#first').css('display', 'inline');
                  $('#first').focus();
              });
            });
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--It will show first input-->
<a href="#" onclick="showFirst();">Click to show first</a>

<!--Its focusout event will hide it and will show second input-->
<input type="text" id="first" value="" style="display:none;background-color:yellow; color:black;" placeholder="First" />

<!--Its focusout event will hide it and will show third input-->
<input type="number" id="second" value="" style="display:none;background-color:red; color:white;" placeholder="Second" />

<!--Its focusout event will hide it and will show first input-->
<input type="number" id="third" value="" style="display:none;background-color:green; color:white;" placeholder="Third" />
<br />
<br />
<a href="#">&nbsp;</a> <!--Just to receive focus-->

Answer 2

最后，我能够解决它。这是Firefox 60、66、67和68版本中的错误。在bugzilla here和here中查看错误报告。 “ Alice0775 White”建议here添加超时以使其聚焦。我刚刚添加了超时，它开始工作。以下是工作代码：

    $(document).ready(function () {
        $('#first').focusout(function (event) {
            $('body').append('first focusout <br/>');
            event.currentTarget.style.display = 'none';
            $('#second').css('display', 'inline');

            //add timeout to focus
            setTimeout(function () {
                $('#second').focus();
            }, 0)
        });
        $('#second').focusout(function (event) {
            $('body').append('second focusout <br/>');
            event.currentTarget.style.display = 'none';
            $('#third').css('display', 'inline');

            //add timeout to focus
            setTimeout(function () {
                $('#third').focus();
            }, 0)
        });
        $('#third').focusout(function (event) {
            $('body').append('third focusout <br/>');
            event.currentTarget.style.display = 'none';
            $('#first').css('display', 'inline');

            //add timeout to focus
            setTimeout(function () {
                $('#first').focus();
            }, 0)
        });
    });

当输入类型为数字

2 个答案: