정보실

웹학교

정보실

javascript JavaScript를 사용하여 클립 보드에 복사하는 방법

본문

Clipboard API를 사용하여 JavaScript를 사용하여 클립 보드에 복사하는 방법 알아보기.


때로는 복사해서 붙여 넣기에 필요한 것을 제공하는 사이트를 사용하기도 합니다. 아마도 API 키일 수 있습니다. 방금 구입 한 응용 프로그램의 활성화 토큰 일 수 있습니다.


어쨌든 상자 내부를 클릭하면 상자 안의 텍스트가 클립 보드에 복사되므로 직접 붙여 넣을 수 있습니다.


우리 사이트에서 어떻게 그 기능을 구현할 수 있습니까? 클립 보드 API 사용!


https://flaviocopes.com/clipboard-api/ 


document.execCommand() 기능을 사용하여 복사 / 붙여 넣기 작업을 수행하는 다른 방법이 있습니다. 여기서는 이 옵션을 다루지 않겠습니다. 클립 보드 API는 해당 명령의 후속 작업입니다. 


클립 보드 API는 navigator.clipboard 객체에서 사용할 수 있습니다.


navigator.clipboard


Clipboard API는 비교적 최신 버전이며 모든 브라우저가 이를 구현하지는 않습니다. Chrome, 최신 Edge (크롬 기반), Firefox 및 Opera에서 작동합니다.


기능이 구현되었는지 확인하기 위해 이 오브젝트의 존재를 점검 할 수 있습니다.


if (!navigator.clipboard) {
  // Clipboard API not available
  return
}

이해해야 할 것은 사용자의 허락 없이 클립 보드에서 복사/붙여 넣기를 할 수 없다는 것입니다.


클립 보드를 읽거나 쓰는 경우 권한이 다릅니다. 글을 쓰는 경우 사용자의 의도만 있으면 됩니다. 클릭과 같은 사용자 작업에 대한 응답으로 클립 보드 작업을 넣어야 합니다.


클립 보드에 쓰기 


HTML 페이지에 p 요소가 있다고 가정 해보십시오.


<p>Some text</p>


클릭 이벤트 리스너를 작성하고 먼저 클립 보드 API가 사용 가능한지 확인하십시오.


document.querySelector('p').addEventListener('click', async e => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
})


이제 해당 p 태그의 내용을 클립 보드에 복사하려고 합니다. 우리는 event.target으로 식별되는 요소의 innerText를 찾아서 그렇게 합니다.


document.querySelector('p').addEventListener('click', async e => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
})


다음으로, navigator.clipboard.writeText() 메소드를 호출하여 발생할 수 있는 오류를 처리하기 위해 try / catch로 랩핑합니다.


이것은 예제의 전체 코드입니다.


document.querySelector('p').addEventListener('click', async e => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
  try {
    await navigator.clipboard.writeText(text)
    e.target.textContent = 'Copied to clipboard'
  } catch (err) {
    console.error('Failed to copy!', err)
  }
})


Codepen에서 예제를 보고 사용해 볼 수 있습니다.


https://codepen.io/flaviocopes/pen/yLBPaVY


클립 보드에서 읽기 


클립 보드에서 읽는 방법은 다음과 같습니다. 우리는 p 요소를 가지고 있습니다 :


<p>Some text</p>

클릭하면 클립 보드에 저장된 내용으로 요소 내용을 변경하려고 합니다.


먼저 클릭 이벤트 리스너를 만들고 클립 보드 API 가용성을 확인합니다.


document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
})


그런 다음 navigator.clipboard.readText()를 호출합니다. async / await를 사용하여 텍스트 결과를 텍스트 변수에 저장하고 이를 event.target.textContent 값으로 사용합니다.


document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  try {
    const text = await navigator.clipboard.readText()
    event.target.textContent = text
  } catch (err) {
    console.error('Failed to copy!', err)
  }
})


사이트에서 이 코드를 처음 실행하면 이 상자가 나타납니다.

Permission to access the Clipboard API 


클립 보드에서 읽을 수 있도록 사이트에 권한을 부여해야 합니다. 그렇지 않으면 사이트에서 명시적인 권한 없이 클립 보드를 읽을 수 있는 경우 큰 보안 문제가 됩니다.


https://codepen.io/flaviocopes/pen/JjPORbr#code-area 



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 19회 ]  작성일19-09-19 09:33

웹학교