엔터를 치면, input 태그로 부터 값을 읽어와서 (작성해 놓은)검색함수의 파라메터로 전달하는 자바스크립트 코드를 작성하였습니다.
$("#searchinput").on("keyup", function(key){
if(key.keyCode == 13) {
let val = $(this).val();
doSearchSomething(val);
$(this).val("");
}
});보시다시피 검색함수의 호출이 끝나면 input 태그의 값도 초기화합니다.
그런데 MacOS의 크롬에서 오동작을 하네요.
한참을 디버깅 한 결과, keyup이 두 번 호출되는 결과를 만들고 있었습니다.
인터넷을 뒤졌더니 저와 동일한 문제를 겪어서 나름의 방식으로 해결한 기록을 찾았습니다.
- 참고경로: https://min9nim.github.io/2019/06/input-keyup/
해당 경로에 달린 댓글을 보니 "onkeydown 이나 onkeypress"를 사용하면 문제가 발생하지 않는다고도 하네요.
그래서 실험해 보았더니 잘 동작하더군요.
다만, 타이핑 중에 실시간으로 변해야 하는 (즉, A라는 입력 창에 입력하는 문구의 내용을 B라는 입력창이나 다른 곳에 동시에 표시해야 하는)구현에는 "onkeydown 과 onkeypress"는 한 글자 늦게 반영이 되는 터라 "onkeyup"의 사용이 필요했습니다.
키 입력을 하는 행동에 이렇게 세부적으로 나눠진 콜백이 존재하는 이유가 있었네요.
그래도 keyup 의 행동이 os마다 다른 문제는 좀 심각한 것 같습니다 >.<
