[javascript] 콘텍스트 메뉴에서 문자열 복사 기능 추가하기
콘텍스트 메뉴(Context Menu)는 웹 응용 프로그램에서 유용한 기능을 마우스 오른쪽 클릭으로 쉽게 접근할 수 있도록 하는데 사용됩니다. 기본 콘텍스트 메뉴에는 주로 “복사”, “붙여넣기”, “잘라내기” 등의 기능이 포함되어 있습니다. 이때, 웹 애플리케이션의 요구사항에 맞추어 사용자 지정 기능을 추가할 수 있습니다. 이번 글에서는 JavaScript를 사용하여 웹 페이지의 콘텍스트 메뉴에 “문자열 복사” 기능을 추가하는 방법에 대해 알아보겠습니다.
단계 1: HTML
먼저, HTML 파일 내에서 콘텍스트 메뉴로 제공할 요소를 정의합니다. 예를 들어, 특정 텍스트를 감싸는 <div> 요소를 만들어 주세요.
<div id="copyText" oncontextmenu="return false;">Some text to copy</div>
oncontextmenu="return false;"를 사용하여 기본 콘텍스트 메뉴를 비활성화합니다.
단계 2: JavaScript
다음으로, JavaScript를 사용하여 새로운 콘텍스트 메뉴 항목을 만듭니다. 아래 코드는 생성한 <div> 요소를 복사하는 콘텍스트 메뉴 항목을 추가하는 예시입니다.
document.getElementById('copyText').addEventListener('contextmenu', function(e) {
e.preventDefault();
const text = e.target.innerText;
const tempInput = document.createElement('input');
tempInput.style.position = 'absolute';
tempInput.style.left = '-1000px';
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
});
위 코드는 contextmenu 이벤트를 사용하여 콘텍스트 메뉴가 표시될 때 실행됩니다. 사용자가 “문자열 복사” 항목을 선택하면 해당 요소의 텍스트가 복사되어 클립보드에 저장됩니다.
이제 웹 페이지를 로드하고 특정 텍스트를 우클릭하여 새로운 “문자열 복사” 항목을 확인해보세요!
요약
이렇게 JavaScript를 사용하여 웹 페이지의 콘텍스트 메뉴에 문자열 복사 기능을 추가할 수 있습니다. 사용자가 텍스트를 선택해서 복사하는 작업을 훨씬 간편하게 만들어줄 수 있습니다.