JS - 복사한 값, 붙여넣기 이벤트

복사한 값을 테이블 입력 컬럼에 붙여 넣기 하여 데이터가 입력되도록 하는 복사 & 붙여넣기 기능을 추가하다가 문제가 발생했습니다. 

 

keyDown 이벤트에 복사 키(Ctrl+C)를 눌렀을 때 해당 값을 전역 변수로 저장하고, 붙여 넣기 키(Ctrl+V)를 눌렀을 때 현재 컬럼 값이 복사된 타입과 같으면 값을 넣어주는 로직을 추가하여 수정하였습니다.

이렇게 처리하니 해당 페이지에서 복사, 붙여 넣기 하면 정상적으로 동작 하나, 그 외 경우(ex 액셀 데이터, 다른 인터넷 페이지.. )에서 복사한 값을 붙여 넣기 할때 문제가 발생했습니다. (그 외 경우는 다른 페이지이기 때문에 로직을 짠 keyDown 이벤트가 타지 않으므로)

 

원인을 파악하여 아래와 같이 간단한 예시로 정리해봤습니다.

 

1. 내 코드의 문제점

keyDown 복사&붙여넣기 (example)

위와 같이 window keyDown 이벤트로 복사한 값을 저장하는 변수를 만들어 붙여넣기 기능을 추가했습니다. 이렇게 짜면 본 페이지에서는 정상 동작하지만 다른 페이지에서 복사한 값을 붙여 넣기하면 this.copyData 가 업데이트되지 않아 복사한 값이 아닌 이전에 본 페이지에서 복사한 값으로 들어가게 되는 문제가 발생합니다.

 

이를 해결하기 위해 인터넷을 검색해보니 paste 이벤트라는 붙여넣기 할 때 호출되는 이벤트를 찾았습니다. paste 이벤트의 특징은 아래와 같습니다.

 

• 사용자가 브라우저의 사용자 인터페이스를 통해 붙여 넣기를 했을 때 발생합니다.
• 이벤트의 ClipboardEvent.clipboardData 속성에 대해 getData() 메서드를 호출해 클립보드 콘텐츠를 읽을 수 있습니다.
• 데이터 가공 등을 위해 기본 동작을 재정의해야 할 필요가 있는 경우 event.preventDefault()을 호출해 취소하고, 직접 데이터를 삽입하면 됩니다.
  

Element: paste 이벤트 - Web API | MDN

2. 개선

paste (example)

위와 같이 paste 이벤트를 통해 붙여넣기 기능을 추가할 수 있습니다. getData() 함수를 통해 복사한 값을 동적으로 가져올 수 있어, 변수화 하여 따로 관리해주지 않아도 되고, 키 이벤트 체크를 하지 않아도 되기 때문에 편한 것 같습니다~ 

 

 

 

생소한 윈도우 이벤트에 대해서 사용해 볼 때마다 글을 작성하면서 공부해야겠다~