> 웹 프론트엔드 > JS 튜토리얼 > Clipboard API를 사용하여 페이지 로드 시 클립보드 내용을 읽는 방법은 무엇입니까?

Clipboard API를 사용하여 페이지 로드 시 클립보드 내용을 읽는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-10-27 13:30:02
원래의
925명이 탐색했습니다.

How to Read the Clipboard Content on Page Load Using the Clipboard API?

페이지 로드 시 클립보드 내용을 검색하는 방법

웹 브라우저는 클립보드에 액세스하기 위한 API를 제공하므로 페이지에서 해당 내용을 검색할 수 있습니다. 사용자 상호작용 없이 로드됩니다. 이 기능은 텍스트 필드를 미리 채우거나 클립보드 데이터를 표시하는 등의 작업에 특히 유용합니다.

클립보드 API 사용

클립보드 API(navigator.clipboard)는 다음을 제공합니다. readText()라는 메서드입니다. 이름에서 알 수 있듯이 클립보드에서 현재 텍스트 내용을 읽을 수 있습니다.

이 API는 비동기/대기 구문 또는 Promise 구문의 두 가지 방법으로 사용할 수 있습니다.

Async/Await 구문 사용:

<code class="javascript">const text = await navigator.clipboard.readText();</code>
로그인 후 복사

Promise 구문 사용:

<code class="javascript">navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });</code>
로그인 후 복사

권한 요청

이 API는 사용자에게 권한 요청 대화 상자를 표시한다는 점에 유의하는 것이 중요합니다. 이렇게 하면 악성 스크립트가 사용자 동의 없이 클립보드 데이터에 액세스할 수 없습니다.

제한 사항 및 해결 방법

클립보드 API는 버전 109부터 Firefox에서 작동하지 않습니다. Firefox 사용자를 지원해야 하는 경우 타사 클립보드 라이브러리 사용을 고려할 수 있습니다.

콘솔에서 API 코드를 실행하려면 시간 초과를 사용하고 웹사이트 창을 빠르게 클릭할 수 있습니다.

<code class="javascript">setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);</code>
로그인 후 복사

추가 리소스

자세한 정보 및 사용 지침은 다음 Google 개발자 문서를 참조하세요.

  • [Clipboard API](https:/ /developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
  • [사양](https://w3c.github.io/clipboard-apis/)

위 내용은 Clipboard API를 사용하여 페이지 로드 시 클립보드 내용을 읽는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿