많은 웹 애플리케이션에서 사용자들은 텍스트를 선택하고 복사할 수 있는 기능을 기대합니다. 이번 블로그 포스트에서는 자바스크립트 Universal Viewer에서 텍스트 선택 및 복사 기능을 추가하는 방법을 알아보겠습니다.

Universal Viewer는 웹 기반의 이미지 뷰어로써 다양한 이미지 형식을 지원합니다. 이 뷰어에는 이미지에 대한 확대, 축소, 회전 등의 기능을 제공하며, 사용자들은 이미지의 일부분을 선택할 수도 있습니다. 그런데 이 기본 기능으로는 텍스트 선택 및 복사가 불가능합니다.

텍스트 선택 기능 추가하기

다행히도, Universal Viewer는 다양한 이벤트를 제공하여 애플리케이션에 사용자 상호작용을 추가할 수 있습니다. 이를 이용하여 텍스트 선택 기능을 추가해보겠습니다.

먼저, 이벤트 리스너를 등록하여 텍스트가 선택될 때의 이벤트를 처리하는 함수를 작성합니다. 아래의 코드를 참고해주세요.

document.addEventListener('mouseup', function(event) {
  var selectedText = window.getSelection().toString();
  if(selectedText.length > 0){
    // 선택된 텍스트로 할 일을 작성하세요
    console.log(selectedText);
  }
});

위 코드에서는 mouseup 이벤트를 사용하여 마우스 버튼이 눌린 후에 해제될 때의 이벤트를 처리합니다. window.getSelection().toString()은 선택된 텍스트를 가져오는 메서드입니다. 선택된 텍스트가 있을 때에는 콘솔에 출력하도록 작성되어 있습니다.

텍스트 복사 기능 추가하기

텍스트 선택 기능이 동작하는 것을 확인했다면, 이제 선택된 텍스트를 복사하는 기능을 추가해보겠습니다.

JavaScript에서 텍스트를 복사하는 가장 쉬운 방법은 document.execCommand() 메서드를 사용하는 것입니다. 아래의 코드를 참고해주세요.

document.addEventListener('mouseup', function(event) {
  var selectedText = window.getSelection().toString();
  if(selectedText.length > 0){
    var tempElement = document.createElement('textarea');
    tempElement.value = selectedText;
    
    document.body.appendChild(tempElement);
    tempElement.select();
    document.execCommand('copy');
    document.body.removeChild(tempElement);
    
    // 복사 완료 후 할 일을 작성하세요
    console.log('텍스트가 복사되었습니다.');
  }
});

위 코드에서는 document.createElement('textarea')를 통해 임시로 textarea 엘리먼트를 생성하고, tempElement.value에 선택된 텍스트를 할당합니다. 그 후, body에 임시 엘리먼트를 추가하고, tempElement.select()를 호출하여 텍스트를 선택합니다. document.execCommand('copy')를 사용하여 텍스트를 클립보드에 복사한 후, 엘리먼트를 제거하는 작업을 수행합니다.

이제 선택된 텍스트가 복사되었다는 메시지를 콘솔에 출력할 수 있습니다.

이제 자바스크립트 Universal Viewer에 텍스트 선택 및 복사 기능을 추가하는 방법에 대해 알아보았습니다. 이를 통해 사용자들은 이미지 뷰어에서 텍스트를 선택하고 복사하는 간편한 기능을 사용할 수 있게 됩니다. 자세한 내용은 링크를 참고하시기 바랍니다.

참고 문서:

• MouseEvent - MDN
• Document.execCommand() - MDN