Jquery append 시 연관없는 이벤트 발생 해결

HTML과 Jquery 활용한 화면 프론트 작업 중 발생한 문제이다.

문제

Jquery를 통하여 특정 영역에 html을 append 해주는 기능을 작업하던 중

서버에서 요청받은 데이터가 해당 기능 추가 전과 후의 차이가 확인되었음.

설명을 위해 필요한 부분만 작성한 html 코드 예시

<form>
    <div id="baseInfo" style="display:none;">
        <input type="text" name="testName" id="testName"/>
        <input type="password" name="testNumber" id="testNumber" onblur="testFunc();"/>
    </div>

    <div id="testArea">
    </div>
</form>

우선 결과 데이터를 기준으로 비교 결과 testFunc() 함수가 실행된 결과임을 알 수 있었음.

다만 해당 함수 위치한 영역은 숨겨져 있으며 특정조건에 일치하는 경우에 대해서만 표출해주고 있는 형태이다.

함수가 실행되기 위해서는 onblur 이벤트가 발생해야함.

하지만 테스트한 케이스는 해당 영역이 표출되어있지 않음.

append 시 사용하는 Jquery 소스코드
$('#testArea').append("<input type='text'/>");

---

원인분석

아래 브라우저 네이티브 함수를 활용하여 문제가 발생하는 요소에 발생하는 이벤트를 모니터링함.

//이벤트 모니터링 설정 id가 "testNumber" 인 요소에서 발생하는 모든 이벤트 모니터링
monitorEvents($('#testNumber')[0]);

모니터링 설정 후 브라우저의 콘솔창을 확인하면서 테스트를 진행하였음.

append 시 아래와 같은 이벤트 발생

발생한 이벤트를 보면 focus, keydown, keyup, blur 이벤트가 순차적으로 발생하였음.
해당 요소에는 직접적으로 한것이 없는데 이러한 이벤트가 발생하는 것을 확인.

좀 더 정확하게 확인하기 위해 숨김처리 해두었던 baseInfo 태그를 표출로 해두고 테스트를 다시 진행함.

다시 진행을 하는 순간 브라우저의 비밀번호 자동완성 기능이 동작하여 이미 해당 칸을 채워둔 것이 확인되었음.

재현을 하기위해서 해당 영역은 그대로 두고 다음 append 하는 부분을 진행하였음.

역시나 onblur 이벤트가 발생하면서 testFunc() 함수가 실행됨을 확인.

append 시 다른 type인 경우도 영향이 있는지 확인해 본 결과 hidden을 제외한 type은 모두 동일한 이벤트가 발생하였음.

//이벤트발생
$('#testArea').append("<input type='text'/>")
$('#testArea').append("<input type='tel'/>")
$('#testArea').append("<input type='nember'/>")
//select, radio 등

//이벤트 미발생
$('#testArea').append("<input type='hidden'/>")

그렇다면 현재 영역은 표출되고 있으니 자동완성된 값을 지우고 다시 append를 진행하면 정상적으로 동작하는지 확인하였음.

 

오히려 기존 이벤트에 input과 change 이벤트가 추가되며 자동완성 데이터가 다시 입력되는 것이 확인됨.

---

해결방법
브라우저 비밀번호 자동완성 방지 방법은 해당 form 및 input 태그에 선언해주면 됨.

autocomplete="new-password"
또는
autocomplete="off"

 

해결방법 자체는 간단하였으나 원인 파악 및 증상재현을 하는 부분에서 시간이 많이 소요되었음.