텍스트 박스 입력시, 최신 값 가지고오기
텍스트 박스에 값을 입력할 때, 입력되는 순간마다 값을 가지고 와야하는 경우가 있다. `keydown` 이라던가 `input` 같은 이벤트를 사용한다. 이벤트 핸들러 내에서 바로 값을 가지고 오면, 지금 입력하고 있는 글자는 가지고 올 수 없다. 지금 입력되는 글자를 포함하여 가지고 오는 방법은 무엇이 있을까? 구글에서 "how to get incomplete text from input text"로 검색을 하니, 스택오버플로우에서 이에 대한 질문과 답변 을 찾았다. `mousedown`, `input` 이벤트는 변경사항이 적용되기 전에 값을 가지고 온다. 이는 필드에 도달하기 전에 이벤트를 차단할 수 있는 기능을 제공하기 때문이다. 값을 가지고 오기 전에 필드의 내용이 바뀔 수 있는 시간을 줌으로써 이 제한을 피할 수 있다. 간단한 방법으로는 `setTimeout()`를 사용하는 것이다. 이벤트 핸들러 내부에 `setTimeout(function () {} , 1)`을 사용하여 1ms의 간격만 두어도 필드의 내용이 최신 값으로 적용되어 현재 입력된 값을 같이 가지고 올 수 있다. el.addEventListener('input', function (evn) { // setTimeout 내에서는 this의 대상이 달라진다. var target = evn.target; setTimeout(function () { console.log(target.value); }, 1); });
