자바 스크립트 : Chrome에서 알림 방법을 중지 할 수 없습니다.

Question

입력 텍스트와 입력 텍스트 값을 확인하기위한 버튼이 있습니다.

웹 페이지가로드되면 입력 텍스트에 포커스가 있으며이 값은 기본적으로 비어 있습니다.

그래서 포커스를 입력 텍스트 (onblur) 외부에 놓으면 입력 텍스트 값이 비어있을 때 check_input_value (event) 함수가 경고 ("사용자 입력 값이 비어서는 안됨")을 한 번 실행합니다.

이것은 Firefox에서 완벽하게 작동합니다. 하지만 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에서 잘 작동합니다. 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/

편집 : 당신처럼 보이는 그러나

은 여전히 ​​때 같은 무한 루프를 얻을 수 창 밖을 클릭합니다. 또 다른 작품은 주위에 다른 값을 할당 한 후 제한 시간의 값을 할당하는 것입니다 :

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/