JavaScript에서 클립 보드에 텍스트 복사
-
JavaScript에서
Document.execCommand()메서드를 사용하여 클립 보드에 텍스트 복사 -
JavaScript에서
Clipboard API를 사용하여 텍스트를 클립 보드에 복사
오늘날 많은 웹 개발자는 사용자가 단 한 번의 클릭으로 웹 사이트에서 여러 텍스트를 직접 복사 할 수있는 기능을 웹 사이트에 구현하려고합니다. 가장 일반적으로 사용되는 예는 기술 웹 사이트에서 터미널 명령 또는 전체 코드 스 니펫을 복사하는 것입니다.
클립 보드가 무엇을 의미하는지, 그리고이 전체 프로세스가 어떻게 작동하는지 살펴 보겠습니다. 그 후 JavaScript에서 클립 보드로 복사 기능을 구현합니다.
애플리케이션, 이미지, 텍스트, 파일 등과 같이 컴퓨터 내부에있는 모든 것을 데이터라고합니다. 따라서 우리가 컴퓨터 내부에있는 것을 복사하려고 할 때마다 컴퓨터는 메모리의 작은 부분을 복사 한 데이터에 할당하여 해당 데이터를 해당 메모리 공간에 저장합니다. 이를 [클립 보드]라고하며, 복사 한 정보를 컴퓨터가 기억하는 방법입니다. 이제 메모리 내부에 데이터가 저장되었으므로이 데이터를 가져와 붙여 넣거나 원하는 횟수만큼 사용할 수 있습니다.
이론적으로는 간단하게 들리지만 많은 복잡성이 관련되어 있기 때문에 실제로 구현하기가 어렵습니다. 그러나 걱정하지 마십시오. JavaScript를 사용하면 Document.execCommand() 메서드와Clipboard API를 사용하여 훨씬 더 간단한 방법으로이 작업을 수행 할 수 있습니다.
JavaScript에서Document.execCommand()메서드를 사용하여 클립 보드에 텍스트 복사
이것은 클립 보드와 상호 작용하는 데 가장 널리 사용되는 방법입니다. 이 방법을 사용하면 아래 3 가지 작업을 수행 할 수 있습니다.
Document.execCommand('copy')를 사용하여 텍스트를 클립 보드에 복사합니다.Document.execCommand('cut')를 사용하여 텍스트를 잘라내어 클립 보드에 추가합니다.Document.execCommand('paste')를 사용하여 클립 보드에 이미있는 내용을 붙여 넣습니다.
수행 할 작업의 매개 변수를 전달해야합니다. 이 기사에서는 복사 작업에만 초점을 맞추고 다른 작업에는 초점을 맞추지 않습니다. 예를 들어이 복사 작업을 이해합시다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button onclick="copyToClipBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert('Copied!');
}
먼저, 문자열과버튼을 포함하는textarea가있는 HTML 파일이 있습니다. 여기서 우리의 목표는copy버튼을 클릭 할 때textarea내부에있는 텍스트를 복사하는 것입니다. 둘째,copyToClipBoard()라는 함수가있는 JS 파일이 있습니다. 이 함수는 텍스트를 클립 보드에 복사하는 역할을합니다.
처음에는document.getElementById를 사용하여 DOM 내부에있는textarea를 가져와야하며이 요소를content변수에 저장합니다. 이제content변수 안에textarea의 내용이 있습니다. 텍스트를 복사하려면 먼저select()메소드를 사용하여 전체 텍스트를 선택해야합니다. 이것은 마우스를 사용하여 텍스트를 선택하는 방법과 유사합니다.
document.execCommand('copy')메소드를 사용하여 선택한 텍스트를 복사하고 사용자에게 텍스트가 클립 보드에 복사되었음을 알리는 경고를 표시합니다.
마지막으로Copy버튼의copyToClipBoard()함수를onClick이벤트로 호출해야합니다. 이제 브라우저에서이 HTML 페이지를 열면 최종 결과가 표시됩니다.
JavaScript에서Clipboard API를 사용하여 텍스트를 클립 보드에 복사
Clipboard API는 클립 보드에 내용을 복사하고 붙여 넣을 수있는 비동기 읽기 및 쓰기 작업을 제공합니다. 클립 보드 API는navigator.clipboard개체 내에서 사용할 수 있습니다.
이 API는 JavaScript 언어에 새로 추가 된 것으로 모든 브라우저, 특히 이전 버전을 지원할 수있는 것은 아닙니다. 브라우저에서이 API를 지원하는지 확인하려면 아래 코드를 사용할 수 있습니다.
if (!navigator.clipboard) {
// Clipboard API not available
return
}
클립 보드 API를 사용하여 텍스트를 클립 보드에 복사하는 방법을 살펴 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button id="btn" onclick="copyToClickBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClickBoard() {
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {console.log('Text copied to clipboard...')})
.catch(err => {
console.log('Something went wrong', err);
})
}
위의 코드는 이전에 본 코드와 거의 비슷합니다. 여기서 유일한 차이점은copyToClickBoard()함수를 수정했다는 것입니다. 이 메서드는Copy버튼을 누를 때 호출됩니다. 이 함수 내에서 먼저innerHTML속성을 사용하여textarea내부에있는 텍스트를 가져오고 해당 텍스트를content변수에 저장합니다.
navigator.clipboard오브젝트에는 두 가지 메소드가 있습니다. 하나는 텍스트를 클립 보드에 복사하는 데 사용되는writeText()메서드이고, 다른 하나는 클립 보드에있는 텍스트를 붙여 넣는 데 사용되는readText()메서드입니다. 여기서는writeText()메소드에만 관심이 있습니다.
이 메소드 내에서 현재 전체 텍스트를 문자열 형식으로 보유하는content변수를 전달해야합니다. 그 후,이 메서드는 텍스트를 가져와 클립 보드에 복사합니다. 성공하면Text copied to clipboard...메시지가 표시됩니다. 그렇지 않으면 발생한 오류 유형에 따라 오류 메시지가 표시됩니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn