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

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

Oct 27, 2024 pm 01:30 PM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

jQuery 날짜가 유효한지 확인하십시오 jQuery 날짜가 유효한지 확인하십시오 Mar 01, 2025 am 08:51 AM

jQuery 날짜가 유효한지 확인하십시오

jQuery는 요소 패딩/마진을 얻습니다 jQuery는 요소 패딩/마진을 얻습니다 Mar 01, 2025 am 08:53 AM

jQuery는 요소 패딩/마진을 얻습니다

10 JQuery Accordions 탭 10 JQuery Accordions 탭 Mar 01, 2025 am 01:34 AM

10 JQuery Accordions 탭

10 JQuery 플러그인을 확인할 가치가 있습니다 10 JQuery 플러그인을 확인할 가치가 있습니다 Mar 01, 2025 am 01:29 AM

10 JQuery 플러그인을 확인할 가치가 있습니다

노드 및 HTTP 콘솔로 HTTP 디버깅 노드 및 HTTP 콘솔로 HTTP 디버깅 Mar 01, 2025 am 01:37 AM

노드 및 HTTP 콘솔로 HTTP 디버깅

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

jQuery div에 스크롤 바를 추가합니다 jQuery div에 스크롤 바를 추가합니다 Mar 01, 2025 am 01:30 AM

jQuery div에 스크롤 바를 추가합니다

See all articles