[javascript] 콘텍스트 메뉴에서 링크 복사 기능 추가하기

11 Dec 2023

javascript

웹 애플리케이션을 개발할 때 사용자 편의성을 높이기 위해 종종 콘텍스트 메뉴를 활용합니다. 이번에는 콘텍스트 메뉴에 링크를 복사하는 기능을 추가하는 방법에 대해 알아보겠습니다.

1. 콘텍스트 메뉴 생성하기

우선 HTML과 CSS를 사용하여 콘텍스트 메뉴를 생성합니다. 아래는 간단한 예시입니다.

<div id="content">
  <p>이곳에 컨텐츠를 추가합니다.</p>
</div>

<!-- 콘텍스트 메뉴 템플릿 -->
<div id="context-menu">
  <ul>
    <li id="copy-link">링크 복사</li>
  </ul>
</div>

#context-menu {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px 0;
}

2. 링크 복사 기능 추가하기

자바스크립트를 사용하여 선택한 요소의 링크를 복사하는 기능을 추가할 수 있습니다.

document.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  const contextMenu = document.getElementById('context-menu');
  contextMenu.style.top = event.clientY + 'px';
  contextMenu.style.left = event.clientX + 'px';
  contextMenu.style.display = 'block';
});

위의 코드는 마우스 우클릭 이벤트를 감지하여 콘텍스트 메뉴를 보여주는 예시입니다.

3. 링크 복사 기능 구현하기

이제 선택한 요소의 링크를 복사하는 기능을 추가합니다.

document.getElementById('copy-link').addEventListener('click', function() {
  const selectedText = window.getSelection().toString();
  if (selectedText.match(/^https?:\/\//)) {
    const textarea = document.createElement('textarea');
    textarea.value = selectedText;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }
});

위의 코드는 ‘링크 복사’를 클릭했을 때 선택한 텍스트가 링크인 경우 클립보드에 복사하는 예시입니다.

이제 콘텍스트 메뉴에 링크 복사 기능이 추가되었습니다!

참고 자료:

기술 블로그에 이 기능을 추가한 방법을 자세히 설명하는 포스트를 작성하는 것이 좋을 것입니다.