JavaScript를 사용하여 클립보드에 텍스트를 복사하는 방법은 무엇입니까?

12598 단어 beginnerstutorialjavascriptwebdev
안녕 내 친애하는 친구,

오늘 우리는 JavaScript를 사용하여 텍스트나 링크를 클립보드에 복사하는 방법을 볼 것입니다.

방문자가 생성된 링크를 클립보드에 복사할 수 있어야 한다는 클라이언트 요구 사항을 프로젝트에서 공유하기로 결정했습니다. 인기 있는 웹사이트를 언급하기 위해 Dropbox 또는 Google Drive와 같은 많은 웹사이트를 방문했을 수 있는 새로운 것이 아닙니다. 링크 가져오기/공유를 클릭하면 링크가 생성되고 그 옆에 버튼 사본이 생성된 다음 링크를 복사합니다. 당신의 클립보드.

당신이 생각하는 것보다 훨씬 더 쉽습니다.
시작하겠습니다.

내 데스크톱 copyTextJS에 폴더를 만들고 이 폴더 안에 3개의 파일을 만들겠습니다.
  • index.html
  • style.css
  • script.js

    • VScode에서 폴더를 열겠습니다. 사용하기 편한 편집기를 사용할 수 있습니다.

    index.html을 열고 다음 코드를 붙여넣습니다.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Copy Text To Clipboard</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="container">
      <div class="wrapper">
        <form>
          <input
            type="text"
            name="text"
            id="text"
            placeholder="Type any text and click copy"
            autocomplete="no"
          />
          <button id="btn" class="btn">Click to Copy</button>
          <br /><br />
          <textarea cols="30" rows="5"> </textarea>
        </form>
      </div>
    </main>

    <script src="script.js"></script>
  </body>
</html>


    위의 HTML 파일에는 다음이 있습니다.
  • style.css를 연결했습니다
    • .
  • script.js를 연결했습니다.
  • 입력 상자(사용자가 복사할 텍스트를 입력할 수 있음), 클릭 시 기능을 실행하는 버튼, 텍스트 영역(필수는 아님)이 있는 양식을 생성했습니다. 복사된 텍스트를 붙여넣는 데 사용할 것입니다. 보여줘!

    • 위 구성 요소의 스타일을 지정합니다.

    style.css를 열고 다음 코드를 붙여넣습니다.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
  height: 100vh;
  width: 100%;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper {
  background: #fff;
  width: 400px;
  height: 200px;
  box-shadow: 5px 5px 15px 10px rgba(0, 0, 0, 0.2),
    5px 5px 15px 10px rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
input#text {
  padding: 5px 10px;
  font-size: 18px;
}
button#btn {
  padding: 5px;
  font-size: 18px;
  border-radius: 6px;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  color: #4b4949;
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}
button#btn:hover {
  background-color: #76daf6;
  box-shadow: 5px 5px 2px 3px rgba(0, 0, 0, 0.3);
}


    위의 스타일에 대해서는 깊이 들어가지 않겠습니다.
    원하는 방식으로 스타일을 지정할 수 있습니다.

    우리 웹페이지는 아래와 같아야 합니다.



    이제 자바스크립트 코딩을 시작하겠습니다.

    script.js를 열고 다음 코드를 복사합니다.

    const btn = document.getElementById("btn");
btn.addEventListener("click", copyText);

function copyText(e) {
  e.preventDefault();
  const text = document.getElementById("text");
  text.select();
  document.execCommand("copy");
}


    우리의 코드를 이해하자:

    라인 1 우리는 버튼을 잡았습니다
    2행에서는 버튼에 copyText 함수를 트리거하는 클릭 이벤트를 추가합니다.

    이제 우리의 기능을 이해합시다.
    양식의 기본 동작을 방지하기 위해 e.preventDefault()를 사용했습니다.
    우리는 텍스트 상자를 잡고 javascript 메서드 select()를 사용하여 텍스트 상자 안에 입력된 텍스트를 선택했습니다.
    이제 우리는 마법의 코드 라인에 도달했습니다.
    document.execCommand("copy");
    HTML 문서가 designMode로 전환되면 해당 문서 개체는 양식 입력 또는 contentEditable 요소와 같은 현재 편집 가능 영역을 조작하는 명령을 실행하는 execCommand 메서드를 노출합니다.
    복사
    현재 선택 항목을 클립보드에 복사합니다.

    위의 코드 줄은 선택한 텍스트를 클립보드에 복사합니다.

    그래서 우리는 미니 튜토리얼의 끝에 도달했습니다. 당신이 그것을 즐겼기를 바랍니다.

    게시물이 마음에 들었거나 오늘 배운 새로운 내용이라면 좋아요를 누르는 것을 잊지 마세요. 그리고 아직 안하신 분들은 팔로우 해주시면 새 글 올라올 때마다 알림을 받아보실 수 있습니다.

    이전 게시물에 대한 링크는 다음과 같습니다.

    flexbox를 사용하여 토글 버튼 애니메이션으로 반응형 navbar를 만드는 방법은 무엇입니까?
    https://bit.ly/3qk9QQ4

    HTML 및 CSS를 사용하여 웹사이트에 대한 도움말 섹션을 만드는 방법은 무엇입니까?
    https://bit.ly/3ewA7Ys

    HTML 및 CSS를 사용하여 간단한 애니메이션을 만드는 방법...(텍스트 슬라이드 및 페이드)
    https://bit.ly/3TOktrM

    좋은 하루 되세요.
    React JS를 사용하여 동적 종속 드롭다운 빌드
    값으로 전달

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage