Javascript: я не могу остановить метод предупреждения в Chrome

Question

У меня есть текст ввода и кнопка для проверки входного текстового значения.

При загрузке веб-страницы входной текст имеет фокус, и по умолчанию это значение пуст.

Поэтому, когда вы помещаете фокус вне текста ввода (onblur), функция check_input_value (event) выполняет предупреждение («Ваше входное значение не должно быть пустым») один раз, когда значение входного текста пуст.

Это прекрасно работает в Firefox. Но в Chrome это предупреждение выполняется неопределенно, а не один раз.

Вот код (вы можете попробовать это (попробуйте с Chrome) на https://jsfiddle.net/fcg86gyb/):

<input type="text" id="input_text"> <input type="button" value="Check input value" onclick="check_input_value(event);"> 

<script type="text/javascript"> 

//Get the input text element : 
input_text = document.getElementById("input_text"); 

//Put focus in input text : 
input_text.focus(); 

/*Add event listener in the input text element. 
On blur, if your input value is empty, then execute check_input_value(event) function 
to check input text value : 
*/ 
input_text.addEventListener('blur', 

            function(event) 
            { 
             var event = window.event || event; 
             check_input_value(event); 
            } 
            , false 
         ); 

//Function for checking input text value : 
//if the input value is empty, display alert "Your input value must not empty", and put focus in input text.       
function check_input_value(event) 
{ 
    var event = window.event || event; 

    if(input_text.value == "") 
    { 
     alert("Your input value must not empty"); 

     input_text.focus(); 

     return false; 
    } 
} 

</script> 

Так как выполнить один раз оповещение вместо неопределенно долго в хроме?

Answer 1

Хром выполняется бесконечно, а не один раз, потому что ваша функция всегда возвращает фокус на текст ввода и всегда вы меняете фокус, на который будет вызываться ваша функция. В Firefox хорошо работает, потому что входной текст не получает фокус в конце функции javascript. Если вы удалите input_text.focus();, это сработает.

Answer 2

Спасибо за ссылку на jsfiddle. Я пробовал работать над этим и обнаружил, что input_text.focus() получает вызов рекурсивно.

Я прокомментировал это, и это сработало. Я думаю, вы должны вызвать input_text.focus() где-то снаружи, где вызов может быть не рекурсивным.

Это ссылка, где я пытался: https://jsfiddle.net/fcg86gyb/1/

//Get the input text element : 
input_text = document.getElementById("input_text"); 

//Put focus in input text : 
input_text.focus(); 

/*Add event listener in the input text element. 
On blur, if your input value is empty, then execute check_input_value(event) function : 
*/ 
input_text.addEventListener('blur', 

           function(event) 
           { 
            var event = window.event || event; 
            check_input_value(event); 
           } 
           , false 
        ); 

//Function for checking input text value : 
//if the input value is empty, display alert "Your input value must not  empty", and put focus in input text.       
function check_input_value(event) 
{ 
    var event = window.event || event; 

if(input_text.value == "") 
{ 
    alert("Your input value must not empty"); 
    //input_text.focus(); 

    return false; 
} 
} 

Если вам нужно сохранить фокус на текстовом поле после показа окна предупреждения только один раз, вы можете использовать временную переменную, как я уже говорил в комментарий, и вы можете добиться такого же результата:

//Get the input text element : 
input_text = document.getElementById("input_text"); 

//Put focus in input text : 
input_text.focus(); 
var temp = 0; 
/*Add event listener in the input text element. 
On blur, if your input value is empty, then execute check_input_value(event) function : 
*/ 
input_text.addEventListener('blur', 

function(event) 
{ 
    var event = window.event || event; 
    if(temp == 0) 
    { 
     check_input_value(event); 
    } 
    else 
    { 
     button_focus(); 
    } 
} 
, false); 

//Function for checking input text value : 
//if the input value is empty, display alert "Your input value must not empty", and put focus in input text.       
function check_input_value(event) 
{ 
var event = window.event || event; 

    if(input_text.value == "") 
    { 
    alert("Your input value must not empty"); 
    input_text.focus(); 
    temp = 1; 
    return false; 
    } 
} 
function button_focus() 
{ 
    if(input_text.value == "") 
    { 
    input_text.focus(); 
    } 
    temp = 0; 
    return false; 
} 

Надеюсь, это поможет.

Answer 3

Это похоже на ошибку в Chrome 52 (discussed here). Обходной, который придумал было удалить событие размытия и приклеить ее в тайм-аут:

if(input_text.value == "") 
{ 
    alert("Your input value must not empty"); 

    var tmpBlur = input_text.blur; 
    input_text.blur = null;  
    setTimeout(function() { 
     input_text.focus(); 
     input_text.blur = tmpBlur; 
    }, 0); 

    return false; 
} 

https://jsfiddle.net/wpys5x75/3/

EDIT:

Однако это выглядит, как вы все равно получите тот же бесконечный цикл когда вы щелкаете за окном. Другая работа вокруг было бы присвоить другое значение, а затем передать значение в тайм-аут:

if(input_text.value == "") 
{ 
    alert("Your input value must not empty"); 

    input_text.value = ' '; 
    setTimeout(function() { 
     input_text.focus(); 
     input_text.value = ''; 
    }, 0); 

    return false; 
} 

https://jsfiddle.net/wpys5x75/5/