JS로 복사 버튼 만들기

[Clique aqui para ler em português]

나중에 검색하거나 어딘가에 저장하기 위해 화면에서 무언가를 복사해야 하는 경우는 매우 일반적이며 이를 통해 JavaScript로 텍스트를 복사하는 빠른 기능을 만들 것입니다.

암호

먼저 인터페이스를 만들고 HTML만 사용하여 간단한 작업을 수행합니다.

<input id="input" type="text" />
<button id="execCopy"> execCopy </button>
<button id="clipboardCopy"> clipboardCopy </button>

HTML 구조에서 복사할 텍스트가 될 input가 생성되었으며 JavaScript로 텍스트를 복사하는 두 가지 방법을 시연하는 데 사용할 두 개의 버튼이 있습니다.

// Type 1
document.getElementById('execCopy').addEventListener('click', execCopy);
function execCopy() {
  document.querySelector("#input").select();
  document.execCommand("copy");
}

// Type 2
document.getElementById('clipboardCopy').addEventListener('click', clipboardCopy);
async function clipboardCopy() {
  let text = document.querySelector("#input").value;
  await navigator.clipboard.writeText(text);
}

첫 번째 유형에서 우리는 같은 이름의 함수를 호출하는 id execCopy를 가진 버튼에 이벤트를 추가합니다. 이 함수에서는 먼저 텍스트를 선택한 다음 execCommand("copy"); 함수를 사용합니다. 이것은 복사 명령을 실행하는 기본 함수입니다.

두 번째 유형에서는 동일한 이름의 함수를 호출하는 idclipboardCopy를 가진 버튼에 이벤트를 추가합니다. 이 함수에서는 먼저 입력 값을 검색한 다음 이 함수의 세부 정보인 clipboard 함수로 이동합니다. 올바르게 작동하려면 async 및 await 를 사용하거나 then() 를 사용해야 합니다.

그렇게 간단하게 준비했습니다.

데모

아래에서 작업하는 전체 프로젝트를 참조하세요.

유튜브

시청을 선호하는 경우 youtube(PT-BR의 비디오)에서 개발을 참조하십시오.

읽어 주셔서 감사합니다!

질문, 불만 사항 또는 팁이 있으면 여기에 의견을 남길 수 있습니다. 기꺼이 답변해 드리겠습니다!

😊😊 또 만나요! 😊😊