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