[javascript] input select 이벤트 feat 이슈

javascript의 input안에 들어있는 텍스트를 선택한것에 대한 정보가 필요하여 찾아보고 만들다가 이슈를 확인했다.

이벤트는 간단히 addEventListener에서 "select"를 하면 되는데, 현재 하고 있는게 jquery를 쓰고 있어 발생 현상이 jquery쪽 이슈인거라고 생각했었다. 그런데 js로도 해보니 같은 현상 확인

 

1. input을 여러개 생성

2. input에 데이터를 넣음

3. 마우스로 input안에 텍스트를 선택 -> select 이벤트 발생

4. tab키를 눌려서 다음 input으로 이동 -> select 이벤트 발생

5. 마우스로 마지막이 아닌 input의 텍스트를 선택 -> select 이벤트 발생

6. tab키를 눌려서 다음 input으로 이동 -> 이벤트 발생하지 않음

 

정리하자면 select 이벤트가 tab키로 한번 이동을 한 뒤에는 tab키로는 다시 발생하지 않는 이슈.

 

결국 그냥 select 이벤트로 연결하지 않고  keyup에서 selectionStart와 selectionEnd 값을 사용해서 선택에 대한 체크를 하여 처리했다.

 

 

아래는 js로 테스트했던 코드를 붙여놨다. 궁금하신 분들은 적기 귀찮을테니 보고 해보시면!!!

 

//html
<input type="text" value="1"/>
<input type="text" value="2"/>
<input type="text" value="3"/>
<input type="text" value="4"/>

//js
const eleList = document.querySelectorAll("input");
eleList.forEach(function(ele){
	ele.addEventListener("select",function(){
  	console.log('select Event', this.value);
  });
})

 

jsfiddle 링크 : https://jsfiddle.net/haibane/o0rk78de/1/