JavaScript - Chrome에서 textbox를 onblur -> focus를 했을 때 무한 루프 현상

 

 

[Javascript] Chrome에서 TextBox를 

onblur->focus를 했을 때 무한 루프 현상

 

 

 

 

다른 브라우저(Edge, FF, IE)에서는 발생하지 않았으나, Chrome에서만 발생하는 문제가 있었다.

 

 

window.onload = function() {      var input = document.getElementById("test");     input.addEventListener("blur", function() {         if (confirm("confirm")) {             alert("true.");         } else {             alert("false.");             input.focus();         }     }); }

<input id = "text" type ="test" />

input이 blur가 되면 confirm창으로 확인/취소를 하고 취소를 하면 input에 다시 focus를 주는 기능을 구현해봤다.

 

하지만 "확인"을 했을 때는 정상이나, "취소"를 했을 때 focus를 주면 계속 confirm창이 나타나는 문제가 생겼다.

 

그래서 해결 한 방법이.

 

window.onload = function() {      var input = document.getElementById("test");     input.addEventListener("blur", function() {         if (confirm("confirm")) {             alert("true.");         } else {             alert("false.");             setTimeout(function(){               input.focus();             }, 10)                      }     }); }

 

setTimeout를 줘서 input에 focus를 두게 되었더니 해결하게 되었다.

 

아마 "취소" 버튼을 누르고 focus로 돌아가면서 다시 onblur가 되는 현상 때문인 것 같다.

 

이 문제는 confirm 뿐만 아니라 alert를 사용할 때도 문제가 생기는 것 같다.

(사실 이런 질문들은 찾아보면 엄청 많다. 버그라는 말도 있고...)

 

이 질문은 stackoverflow에서 도움을 받았다.

 

(stackoverflow는 진짜 神인듯...)

 

https://stackoverflow.com/questions/50979992/javascript-blur-focus-infinity-loop/50980014#50980014

(▲ 질문 & 답)

 

 

 

 

ps. 영어공부좀 해야겠다. 글을 쓸때 번역기의 힘을 빌리니 자꾸 질문 글에 비추천을 받게 된다.ㅠㅠ