JS 사용자의 클립보드에 텍스트 복사
어떤 방법을 사용해야 합니까?
이를 위해 javascript 함수를 사용할 수 있습니다:
execCommand()
. 그러나 MDN web docs에 따르면 이 기능은 곧 쓸모없게 되어 웹 표준에서 제거될 것입니다. 그렇기 때문에 이 자습서에서는 Clipboard.writeText()
라는 다른 방법을 사용합니다.이 함수의 구문은 매우 간단합니다.
let variable = navigator.clipboard.writeText(‘your text’);
먼저 입력 내용을 사용자의 클립보드에 복사하는 방법을 살펴보겠습니다. 그런 다음 사용자가 복사할 수 있는 여러 코드 조각이 있는 더 복잡한 예를 볼 수 있습니다.
간단한 예
이 예에서 사용자는 입력에 원하는 텍스트를 입력하고 이 목적을 위해 제공된 버튼을 클릭하여 포함된 텍스트를 복사할 수 있습니다. 모든 웹 프로젝트에서와 마찬가지로 첫 번째 단계는 HTML을 설정하는 것입니다. 우리의 경우 매우 간단합니다. 입력과 "복사"버튼입니다.
<input type="text" id="textInput" placeholder="Your text">
<button id="copy" content="" onclick="copyText(event)" ></button>
미래의 JavaScript를 예상하여 사용자가 "복사"버튼을 클릭할 때
copyText()
함수를 호출합니다.그런 다음 앞에서 언급한 함수를 사용하여 자바스크립트를 추가하기만 하면 됩니다.
// We select our input
let input = document.getElementById("textInput");
// Copy the text of the input
copyText = (e) => {
// We check that the input is not empty
if (input.value.length) {
// We copy the text it contains into the clipboard
navigator.clipboard.writeText(input.value).then(() => {
// We confirm the action in the console
console.log("Text Copied !");
})
} else {
console.log("The input is empty ");
}
}
좀 더 예쁘게 보이도록 약간의 CSS를 추가하면 다음과 같은 결과가 나타납니다.
(일부 브라우저에서는 코드펜 미리보기에서 "복사"기능이 비활성화될 수 있습니다. 프로그램을 테스트하려면 "CodePen에서 편집"을 클릭하여 프로그램을 열어야 할 수 있습니다.)
조금 더 복잡한 예
약간 더 복잡한 두 번째 예제에서는 사용자의 "복사"버튼 클릭을 감지한 다음 버튼 번호 앞의 문자를 제거하여 버튼의 ID를 검색합니다. 그런 다음 해당 코드 블록의 텍스트를 가져옵니다. 그런 다음 다음 예에서와 같이 변수
text
의 내용을 사용자의 클립보드에 넣습니다.조금 더 가면
하지만 그게 다가 아닙니다.
clipboard
에 대한 다른 방법이 있기 때문에 조금 더 나아갈 수 있습니다.read()
메서드를 사용하면 텍스트가 아닌 경우에도 사용자의 클립보드 내용을 검색할 수 있습니다(허가가 있는 경우)readText()
메서드를 사용합니다. write()
방법으로 이미지를 복사할 수 있습니다. writeText()
이 튜토리얼이 마음에 드셨기를 바랍니다. 질문이 있으시면 언제든지 의견을 남겨주세요. 👍
당신은 나를 지원하고 싶어?
또는
Reference
이 문제에 관하여(JS 사용자의 클립보드에 텍스트 복사), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/clementgaudiniere/js-copy-text-to-the-users-clipboard-4hp4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)