(Vue2) el-input 선택영역(드래그) 문자열 정보 추출

지난 번 메모기능에서 우클릭 시 날짜 정보를 입력하게 해달라는 요청에서 우클릭 시 드롭메뉴를 사용하여 

날짜 넣기, 복사, 붙여넣기 기능을 수행할 수 있도록 해달라는 추가요청이 있었습니다.

 

해당 메모 부분에서는 기본 브라우저의 복사, 붙여넣기 기능을 나타나지 않게 하고있었는데 드롭메뉴를

뜨게해서 복사 붙여넣기 기능도 사용하게 해달라는 내용이었습니다.

 

1. 복사 붙여넣기 기능을 수행할 때 해당 input 영역을 전체 복사 할 수도있지만 실제 사용자가 복사 붙여넣기

   기능을 사용하는 경우 드래그한 글자만 복사하기 때문에 드레그한 값을 가져오는 부분이 필요했습니다.

  

   해당 기능을 찾아보니 document.execCommand('copy')을 사용하면 선택영역에 대한 복사를 수행한다.

   라고 하여 해당 함수를 사용해보았으나, 안타깝게도 현재는 사용하지 않는 방법이기 때문에 다른 

   방법을 사용하라는 오류메시지가 출력되었습니다. 

 

2. 그렇게 다른 방법을 찾아본 결과 찾은 것이 window.navigator.clipboard.writeText(복사할 문자열) 

   함수였는데 이 함수를 수행하기 위해서는 "복사할 문자열" 부분에 들어갈 선택영역 데이터 정보를

   가져오는 작업이 필요했습니다. 

 

   그 방법이 document.getSelection().toString()인데 이 함수를 사용하게 되면 현재 사용자가 드래그 한

   영역에 값에대한 정보를 얻어올 수 있는데 이 함수를 그냥 사용하게 되면 null 메시지가 무조건 뜨기  

   때문에 널체크를 필수적으로 해주어야 합니다.

 

예시 코드로 설명하자면 아래와같습니다  

복사 하기 ex)

 

CopyEventFun(){

   let selectText = '';

   if(널체크){

      selectText  = document.getSelection().toString();

   }

   //윈도우 클립보드에 해당문자열(selectText)복사.

   windows.navigator.clipboard.writeText(selectText);

 

}

 

 

 

3.  붙여넣기 기능은 window.navigator.clipboard.readText()을 사용하여 간단하게 구현이 가능했습니다. 

 

붙여넣기 ex)

 

PasteEventFun(){

 

   window.navigator.clipboard.readText().then(clipText) => {

 

      clipText(클립보드에 복사되어있던 정보) 를 처리하는 코드 구성

 

   }

 

 

}