Firefox запускает событие фокусировки / размытия автоматически, когда тип ввода - число

Question

У меня JavaScript-код отлично работает во всех браузерах, кроме Firefox. Я использую его в Firefox Quantum Version 66.0.2 (64-bit). У меня есть три элемента управления вводом HTML, все из которых имеют свой стиль отображения не установлен. Нажатие на ссылку показывает первый ввод. При событии фокуса первого входа первый вход скрывается, а второй становится видимым. Аналогично, при фокусировке второго входа второй вход скрывается, а третий становится видимым.

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

Проблема:

При нажатии «Кликните, чтобы показать первым» отображается «первый» ввод. Когда нажата вкладка, события фокусировки 'second' и 'third' запускаются сами по себе, а 'second' и 'second' никогда не отображаются. Интересно, что если тип ввода all меняется с номера на текст, тогда тот же код работает нормально.

Откройте этот JSFiddle в Firefox, чтобы увидеть его в действии.

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 здесь и здесь .«Alice0775 White» предложил здесь добавить время ожидания для фокусировки.Я только добавил время ожидания, и оно начало работать.Ниже приводится рабочий код:

    $(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)
        });
    });