복사하려면 클릭하세요!

7764 단어 webdevreactjavascriptcodenewbie

얘들아 👋



일부 웹사이트에 "클릭하여 복사"기능이 있는지 궁금한 적이 있습니까?
  • 또한 사용자가 공유 버튼을 클릭하여 웹사이트에 제품의 URL을 작성하도록 하는 전자상거래 웹사이트를 구축하는 경우에도 그렇게 할 수 있습니다.
  • 또는 사람들이 어딘가를 클릭하고 코드 스니펫을 복사할 수 있는 웹 사이트/문서를 구축하고 있습니다.

    • 이 기사에서는 사용자의 클립보드 😄를 어지럽히는 방법을 설명합니다.

    시작해봅시다 🚀



    이것을 더 잘 설명하기 위해 데모 프로젝트를 만들겠습니다. 원한다면 따라할 수 있습니다.
  • 폴더를 만들고 원하는 대로 이름을 지정합니다.
  • 해당 폴더에 두 개의 파일을 만듭니다.
  • 1. index.html
  • 2. app.js

    • index.html에 다음 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 to Clipboard 📋</title>
    <style></style>
  </head>
  <body>
    <h2>Implementing copy to clipboard with a simple click 📋</h2>
    <button>Click to copy</button>
    <script src="./app.js"></script>
  </body>
</html>


  • 이제 h2에서 button 및 app.js 요소를 선택합니다.

    • const h2 = document.querySelector('h2');
const button = document.querySelector('button');


    브라우저에서 index.html를 미리 봅니다.

    Side note: This demo will not work in IE



    다음과 같아야 합니다 👇


    이제 사용자의 클립보드를 변경하려면 Clipboard API 을 사용해야 합니다.clipboard 개체는 navigator.clipboard 속성에 의해 노출됩니다.
    app.js 파일에 다음 코드를 추가합니다.

    const cb = navigator.clipboard;


  • console.log(cb)는 다음과 같이 보일 것입니다 👇



    • 👉 기억하세요: 클립보드 API는 비동기식입니다. 즉, 모든 메서드가 해결되거나 거부되는 약속을 반환합니다.promise를 사용하려면 async/await 구문 또는 .then/.catch를 사용할 수 있습니다.

    클립보드에서 텍스트 읽기 📋


  • 클립보드에서 텍스트를 읽기 위해 click 이벤트 리스너를 button에 추가합니다.
  • 이벤트 리스너에서 이전에 액세스한 readText() 개체에서 사용할 수 있는 cb 라는 메서드를 호출합니다.

    • button.addEventListener('click', async () => {
  const text = await cb.readText();
  console.log(text);
    // output will be whatever you last copied, 
    // or empty string if the
    // copied data is not of type text.
});

  • 클립보드 사용자가 텍스트를 읽으려면 read 권한을 부여해야 합니다. 그렇지 않으면 작업이 실패합니다. 👇

  • 권한이 거부된 경우 👇


    • You can check if the user granted the permission or not using the Permission API.

    To learn more about Permissions API read my article .



    클립보드에 텍스트 쓰기 📋


  • 사용자의 클립보드에 텍스트를 쓰기 위해 writeText() 개체에서 사용할 수 있는 cb 메서드를 사용합니다.
  • 쓰기 권한이 브라우저에서 자동으로 부여됩니다.
    • app.js에 다음 코드를 작성합니다.

    button.addEventListener('click', async () => {
  // const text = await cb.readText();
  // console.log(text);

  // writing the inner text of the h2 element
  // to the user's clipboard.  
    cb.writeText(h2.innerText).then(() => {
        console.log('text written to clipboard')
    })
});



    이것이이 기사의 전부입니다.

    사용자의 클립보드를 엉망으로 만드는 것이 얼마나 쉬운지 보세요 😂.

    읽어주셔서 감사합니다 ❤️ 도움이 되셨기를 바랍니다.



    간결한 팁과 요령을 보려면 다음을 따르십시오.



    즐거운 코딩 💚

    GIT 로컬 새 분기 및 원격 저장소로 전송
    [북스터디] 객체지향의 사실과 오해 (1)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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